0

Hi im using "Materialize" & flexlider to built my theme, I have some issue while desktop mode, when watching the modals i created there is some padding from left that added to my site, for now, I'm not sharing the code because I dont know where to start, but, here is a temp' link to the page & image to describe the issue.

*Just click the "Modal!!" button, under the slider. Thanks, aviv.

This is my page: https://optica.000webhostapp.com/

This image describe my issue enter image description here

Dave
  • 3,073
  • 7
  • 20
  • 33
AvivS
  • 74
  • 9

1 Answers1

0

Seems like there's an explicit width being set via the style property when the modal is triggered, and it's not taking into account the scrollbar that disappears due to overflow: hidden, and so you end up with a width smaller than 100%.

A quick fix would be to either do body { overflow: auto !important; }, or body { width: auto !important; }, depending on what you intend for it to be (without breaking anything else, of course).

However, the better solution would be to change the behaviour of the modal (if you are able to), and to account for the width including scrollbar with window.innerWidth (or see this question). What modal library are you using?

Community
  • 1
  • 1
Irvin Lim
  • 2,393
  • 17
  • 20
  • Im using Materialize, now I notice that it because i used: – AvivS Oct 22 '16 at 20:10
  • - i used: body { direction: rtl; } , so that padding that added from left suposed to added from right, and replace the scrollbar that disapear from right in modal mod.. – AvivS Oct 22 '16 at 20:13