How to show a message box with close button
Hi All,
How to show a message box with close button as highlighted in the attached screenshot with background colors, buttons etc in a section.
Accepted Solution
Hi,
The solution to this required the following three:
Background-Color: we need to create a new container format in skin with background colors for Header/Body/Outline by either mixins or styles and we need to apply this new container format to the Dynamic Layout which we want. This will give you the background color.
Alignment: we can set the alignments by customizing the Dynamic Layouts based on our requirement or we can use OOTB Dynamic Layouts such as Inline grid, Default etc.
Hiding: we can hide the section with visibility/hide condition on click of Close Icon.
Hello Raj,
You can achieve this in two ways. First way, Create a section and modify the design as per your requirement and and write a condition to hide the section on close icon.
Second way, Modify the error message section in skin file as per your requirement if you want to show error messages.
Thanks,
Hari
Hi Hari,
Thanks for your reply. I do not want the changes to the Error section since it is completely different. And creating new section with buttons and labels is fine with a condition to hide on close icon but how can we achieve it with background color.
Hi,
You can use different Layout formats in Dynamic Layouts such as Inline/Inline-grid etc. to implement this.
Then use Application Skin and apply CSS there, and refer the same in Control/Label format in Controls in Dynamic Layout. Please refer to screenshots.
Hope it helps.
Regards,
Rachit
Hi Rachit,
Thanks for your reply. Putting the labels and buttons and icons in a Dynamic Layout is fine for aligning the fields as required but how can we put the background color to a Dynamic Layout ? I don't think we can apply background color to Dynamic Layout in Skin. But we can add style to Dynamic Layout alone by applying "Inline style" or "Custom CSS class" and i'm not sure whether it is a good practice or not (Inline style and Custom CSS class).
Accepted Solution
Hi,
The solution to this required the following three:
Background-Color: we need to create a new container format in skin with background colors for Header/Body/Outline by either mixins or styles and we need to apply this new container format to the Dynamic Layout which we want. This will give you the background color.
Alignment: we can set the alignments by customizing the Dynamic Layouts based on our requirement or we can use OOTB Dynamic Layouts such as Inline grid, Default etc.
Hiding: we can hide the section with visibility/hide condition on click of Close Icon.