CSS in outsystems
Application Type
Traditional Web

Hi everyone.
I have 1 screen like the picture below.

when I click button X, it will show the following image : 

What CSS property to scale the form without making it move?

Sorry for my bad English.


Thanks and best regard. 

mvp_badge
MVP
Solution

Hi @Dang Quyen,


I have also faced the similar issue in the past and used the below approach to fix it, this might help you as well.

I have attached the sample oml with example in which I have added simple JavaScript code on On render event to remove the class and used one Boolean flag to toggle the view.

https://manish-jawla48.outsystemscloud.com/ExpandFullWidth/FourColumnGallery?_ts=637667934309697985 

Hope this helps.

Thanks,

Manish Jawla

ExpandFullWidth.oml

thanks @Manish Jawla .I have solved the problem.

Hello @Dang Quyen 

Without being able to look at the screen layout and the elements in use, it is very much a guessing game. With what you have provided though, I would suggest starting with setting the width of the element that contains the Form to 'Fill' (or 100%)

This is not always preferable and may not work effectively depending on a variety of factors but let us know how it goes. If possible please share more details of your screen layout or a sample oml.

Regards,

AJ

thanks @AJ. it is very useful.

Hi @Dang Quyen,

If you click the menu close button, you should be change the vendor print list container width to 100% or fill.

Regards,

Dinesh P.

thanks @Dinesh P so much.

mvp_badge
MVP
Solution

Hi @Dang Quyen,


I have also faced the similar issue in the past and used the below approach to fix it, this might help you as well.

I have attached the sample oml with example in which I have added simple JavaScript code on On render event to remove the class and used one Boolean flag to toggle the view.

https://manish-jawla48.outsystemscloud.com/ExpandFullWidth/FourColumnGallery?_ts=637667934309697985 

Hope this helps.

Thanks,

Manish Jawla

ExpandFullWidth.oml

thanks @Manish Jawla .I have solved the problem.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.