Modal dialog with inline layout does not wrap controls in IE11 | Pega 7.2.2
Modal dialog in IE 11 does not wrap controls in a section with inline layout. It does wrap controls in Chrome and Firefox.
Is this an expecting behavior? Is there any setting to wrap the controls in IE 11?
in IE 11
in Chrome
Thanks,
Jun
***Updated by Moderator: Marissa to reference SA***
Accepted Solution
Pegasystems Inc.
IN
Hello Jun,
Thanks for the update and confirming that the reported behavior works in IE11 with the layout mode change(From Flex-box to Inline-box).
FlexBox layouts have limited support in IE. In IE, FlexBox tries to occupy the available space. Refer the Support article discussing the same issue.
Regards,
Rincy
Pegasystems Inc.
IN
Hi Jun,
Thanks for writing to PSC.
Kindly check the layout format setting in the layout used. If it is inline, It will expand till it have width of the browser available.
To make it display as a fixed size or same size in all browsers , set the layout value to anything other than 'inline'. Size of modal will remain same in all browsers.
Hope this helps.
Thanks:
Gurpreet Kaur
Pegasystems Inc.
JP
Hi Gurpreet,
Thank you for your reply.
Either inline or inline grid triple modal dialog shows horizontal scroll in IE 11, but it fits in Chrome and Firefox. Please check the layout difference below. Why only IE 11 shows vertical scroll on modal.
in IE 11
in chrome
Thanks,
Jun
Pegasystems Inc.
US
Hi Jun,
"Modal dialog with inline layout", can you upload your configuration?
Also, please check OOTB UI Gallery: Modal Dialog example. The behavior of it shows the same in both IE and Chrome. See attached result in IE.
Thanks,
Susan
Pegasystems Inc.
JP
Hi Susan,
Thank you for your reply. I am using modal dialog to edit rows of repeat grid.
Uploaded configurations of modal and section inside the modal.
Modal 
Section 
Thanks,
Jun
Pegasystems Inc.
US
Hi Jun,
Your uploaded configuration is too small to see.
Can you attach them as file attachments? Just like mine in my previous reply.
Thanks,
Susan
Pegasystems Inc.
IN
Hello Jun,
I tried replicating the reported behavior at my end, however, I do not see the behavior being different in IE11 as compared to Chrome. Refer the document for your quick reference.
Could you share the screenshot of the Presentation tab of the ModalTest section. This is to see if any inline styles have been added to this dialog.
Regards,
Rincy
Pegasystems Inc.
IN
Hello Jun,
Below is the screenshot on executing the use case using IE11 for your quick reference.
Pegasystems Inc.
JP
Hi Rincy,
Thank you for your explanation. If I changed Layout mode on Presentation tab to "inline-box", IE 11 shows properly as below.
What is the difference between ""inline-box" and "Flexbox"?
Thanks,
Jun
Accepted Solution
Pegasystems Inc.
IN
Hello Jun,
Thanks for the update and confirming that the reported behavior works in IE11 with the layout mode change(From Flex-box to Inline-box).
FlexBox layouts have limited support in IE. In IE, FlexBox tries to occupy the available space. Refer the Support article discussing the same issue.
Regards,
Rincy
Pegasystems Inc.
IN
Hello Jun,
You can refer the PDN Pega 7.2.2 help to know the difference between Inline-block and Flex-box. Below is the snippet for your quick reference:
Layout mode
Flexbox The flexbox (flexible box) alters the width, height, and order of its contents to best fill the available space. The child layouts contained within the flexbox can be laid out in vertically or horizontally and will expand to fill the available space or shrink to avoid overflowing the parent.
Both horizontal and vertical alignment of the child layouts can be manipulated. Nesting layouts (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Selecting the flexbox is recommended.
Hello Jun,
You can refer the PDN Pega 7.2.2 help to know the difference between Inline-block and Flex-box. Below is the snippet for your quick reference:
Layout mode
Flexbox The flexbox (flexible box) alters the width, height, and order of its contents to best fill the available space. The child layouts contained within the flexbox can be laid out in vertically or horizontally and will expand to fill the available space or shrink to avoid overflowing the parent.
Both horizontal and vertical alignment of the child layouts can be manipulated. Nesting layouts (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Selecting the flexbox is recommended.
Inline-block Use the inline block when setting several layouts side-by-side inline. The inline block is compatible with pre-flexbox generation of dynamic layouts. Converting an inline-block dynamic layout to a flexbox later may require addition changes if you use additional CSS for styling the dynamic layout.
I hope this answers your query.
Regards,
Rincy