Question
Pegasystems Inc.
JP
Last activity: 16 Oct 2018 12:03 EDT
Action area centered in Pega 7.3
Hi,
I am using Pega 7.3 and the action area is centered (See attached screenshot). I do not like these spaces in right and left side and want to use these spaces to the maximum instead. This issue was not happening in 7.2. It seems this is coming from new UI-Kit (Work-.pyCaseMainInner). I am trying to tweak it but can't fix it. How can I resolve this issue?
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Pegasystems Inc.
US
The benefit of this recommendation is to avoid blank space between distributed every where. Now that screen resolution has increased significantly and 4K display are becoming the standard, we are able to display more information on a single screen and if you maximize your browser window, you don't need to stretch all the content to 2048px width.
Let see the difference on Pega Sales Automation (contact page) with and without the max-width:
The benefit of this recommendation is to avoid blank space between distributed every where. Now that screen resolution has increased significantly and 4K display are becoming the standard, we are able to display more information on a single screen and if you maximize your browser window, you don't need to stretch all the content to 2048px width.
Let see the difference on Pega Sales Automation (contact page) with and without the max-width:
- Without max-width
- With max-width:
Setting a max-width makes the grid much more readable: column width becomes more consistent and it is much easier to find all the data related to a given row. Similar approach is used on http://design.pega.com
when your application is based on UI-KIT 8 or UI-KIt 9, your application skin inherits from pyEndUser in UI-KIt, then all the out of the box harness have the max-width set. This is set in the file py-enduser71-workarea-overrides.css at the top of the file:
if you want to remove this for a specific harness, you can just use the following CSS Selector:
Pegasystems Inc.
JP
Thank you very much for your explanation. I just missed the last part and I want to remove this setting from any Harness. When I tried commenting out max-width: 1300px, it worked. Is this change appropriate?
Pegasystems Inc.
US
I would not recommend overwriting this file into your application since on next ui-kit upgrade, you will not get the latest changes.
you can add an override in your own CSS file attached to your skin that can cancel out the Max-width just for pyCaseContainer
Pegasystems Inc.
JP
Hi,
Above solution works for regular flow, but it does not take effect for screen flow. Where is max-width specified for screen flow? Where is the best place to override for both regular flow and screen flow?
Thanks,
Pegasystems Inc.
IN
Hello ,
For knowing the style property values you can use the developer tools by inspecting the elements.
To override any style property value its recommended to do it in your application style sheet or in your application skin rather than overriding the actual ootb css file.
Thanks & Regards,
Durga
Pegasystems Inc.
US
For screenflow some of the css are different. Therefore, you can check in screenflow related CSS files from where the specific field is set up.