Log in to AnswerLog in to Follow
UserImage.jpg
Joao Vizela
30Views
5Comments
Solved
Resize Modal Traditional
Question
Traditional Web
Development
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
0
0
05 Jul 2022
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


See solution in context
ExampleModalWebblock.oml
0
0
08 Jul 2022

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

0
0
08 Jul 2022

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
0
0
05 Jul 2022

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
0
0
07 Jul 2022

Replying to Joao Vizela's comment on 07 Jul 2022 07:29:34

Hello 

remove max-width from there and add this

.modal-wrapper {width: 1200px;}

Thanks

0
0
07 Jul 2022
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
0
0
08 Jul 2022

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

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