Question
US
Last activity: 2 May 2017 10:48 EDT
Center Allign the Sections to have similar look on Larger screens.
Hi,
We have a requirement where user,
1) Has work Filters on left.
2) WorkArea/action area in center.
3) We want to give fixed pixel width for both, club them together. And then center allign the whole section.
So that even when user logs into a larger screen, the width remains same and content is center alligned.
Methods Tried:
3 column layout, 2 column layout, inline and margin auto.
Please advise.
Thanks,
Chaitanya
Accepted Solution
ASRC Federal
US
Create a responsive css class to get this done and use the css in the dynamic layout's css style. The below example is for a screen of 1400px; When the screen width is more than 1400px the entire layout is centered. Anything less than 1400px would occupy the entire screen.
@media (min-width: 1400px){
.custom_class_center_content_1400{
margin:0 auto !important;
width:1400px !important;
}}
@media (max-width:1399px) and (min-width: 800px){
.custom_class_center_content_1400{
margin:0 auto !important;
width:100% !important;
}}
Pegasystems Inc.
IN
Hello Chaitanya,
Thanks for posting your query in PSC :)
Just wondering if you intent to give fixed width, will your requirement meet with screen responsiveness. Have you set/enabled this property?
Could you share the screenshot of the settings done at your end. Also, share the Pega version.
Regards,
Rincy
Pegasystems Inc.
IN
Hello Chaitanya,
At my end using Pega 7.1.7, I see we have the option to set the max width. Refer the attached screenshot.
Regards,
Rincy
US
Hi Rincy,
Yes it has. But it would always be that and alligned to the left. It does not "move towards the center" when we reduce the zoom on the browser.
Thanks,
Chaitanya
IN
Hello Chaitanya,
Instead of specifying the size of the panels in PX, could you check if defining the same in % would solve your problem?
This will force the panels to adjust its size according to the screen resolution.
Please let me know if it helps!!
US
Hi Folks, thank you for your suggestion. Let me put this in a different way.
1. We need 3 panels. Left, middle,right.
2. The widths should be fixed. 300px, 1200px, 300px. This should never change.
3. Now if the screen is rendered in a laptop of screen width = 1800px. The sections need to occpuy full width.
4. Now if the screen is rendered in a wide screen desktop of width = 2000px. The additional px of 200, should be evenly added on either side, 100px on left and 100px on right. keeping the body in center of the screen).
Tired and failed approaches:
1. Set fixed widths of 3 panels - Works good when the screen size = sum of fixed widths of layouts.
2. When this is rendered on larger screens - the 3 layouts are now left alligned. Additional pixels are added to the right.
3. Try with defining a dynamic layout of 3 grid layout and define the % based on widths 16.66 , 66.66, 16.66.
Again this works when screen size = sum of fixed widths.
4. When screen is renderd on larger screens. The center layout now has gaps between left and right panels.
Pegasystems Inc.
IN
Hi ChaitanyaGuntaka,
Your second approach with a percentage width and dynamic layout should work.
Can you please provide the screen shot with calculated width details using developer tool?
Using percentage, will not center the content or layout, but it will add/reduce additional px to all sections based on screen size.
Please provide the details.
Thanks:
Gurpreet
Accepted Solution
ASRC Federal
US
Create a responsive css class to get this done and use the css in the dynamic layout's css style. The below example is for a screen of 1400px; When the screen width is more than 1400px the entire layout is centered. Anything less than 1400px would occupy the entire screen.
@media (min-width: 1400px){
.custom_class_center_content_1400{
margin:0 auto !important;
width:1400px !important;
}}
@media (max-width:1399px) and (min-width: 800px){
.custom_class_center_content_1400{
margin:0 auto !important;
width:100% !important;
}}