Resize Modal Traditional
Application Type
Traditional Web

Hi guys,

Im facing an issue with changing the width of a modal widget. I found some threads in the forum regarding this but it doenst work out for me.

I want to use a modal that shows a table with all the columns at once. When I open the de modal I get a horizontal scroll bar because I have too many columns.

I tried several things to solve this like creating a class with a larger width and use this in the ExtendedClass property. But I cant manage it to make it work.

I added a sample OML. Hopefully someone can help me out with this.

Thank you in advance!


ExampleModal.oml

Solution

Hello Joao,

You are writing your Css on the Web block level that's why Your  CSS is not working .

Please move your CSS to theme Level. and if you don't want to move your CSS on the theme level, add(! important) on your CSS.

I have attached updated OML.

I hope this will helps you

Thanks


ExampleModalWebblock.oml

Thank you Diksha, it works now as i intended :)

Hello

This class have some properties due to which you are not able to resize it.

Just Add this to CSS, Also Ihave attached updated oml

.modal-wrapper {     max-width: 1200px;}

I hope this helps

Thanks

ExampleModal.oml

Hi Tousif Khan, 

Thank you for your reply. I apreciate it.

This solution works but when applying this solution I get some other issues.

When I put the modal into a Webblock the CSS code doesnt work. 

It only works if I set the css code in the ExampleModal stylesheet. But if i do that, all my modals will have the same size.

I have attached a new OML so you can see what I mean.

Thank you!

ExampleModalWebblock.oml

Hello 

remove max-width from there and add this

.modal-wrapper {width: 1200px;}

Thanks

Solution

Hello Joao,

You are writing your Css on the Web block level that's why Your  CSS is not working .

Please move your CSS to theme Level. and if you don't want to move your CSS on the theme level, add(! important) on your CSS.

I have attached updated OML.

I hope this will helps you

Thanks


ExampleModalWebblock.oml

Thank you Diksha, it works now as i intended :)

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