search

yuche / vue-strap

Bootstrap components built with Vue.js
http://yuche.github.io/vue-strap/
MIT License
4.71k stars 929 forks source link

Modal is affected by other css styles #417

Open georgecoca opened 7 years ago

georgecoca commented 7 years ago

Hi,

By using the <modal> component where is wrapped by other dom elements (which has their own css styles), the rendered content of modal may be affected due to inheriting styling. This is because the template is rendered where the component it's used. Is there a way to render the template for example on <body> ?

Here is a better explanation: image

wffranco commented 7 years ago

change the font-size over the container affect all the inner content, except for some elements resized by bootstrap styles. if you want your modal have not affected for the resizing, put the modal outside the element you are resizing, or change the font-size to the modal.

georgecoca commented 7 years ago

Hi @wffranco , thanks for you reply. I just put a simple example, there can be a lot of cases when the rendered modal is wrapped by other elements, like parent css classes affecting the modal, absolute elements, etc.

Yes, a simple solution is to always put the <modal> component on <body> or root element, but this means we can't use <modal> on sub-components or where is wrapped by other html elements, because the rendered html can be affected by wrapped elements styles.

So what I'm asking is to a solution to this conflict (not just fixing the font-size issue, which was just an example), so my guess is that the modal template should be "moved" or "transferred" to a non affecting html element like or if there's a root/parent element.

Any idea of a good way to solve this ?

wffranco commented 7 years ago

You test if without vue-strap you got the same behavior? Because almost the 90% of the styles are based on bootstrap, the modal component only have transition styles.

My recommendation is that you use a bootstrap template or something like that, but not to handle manually the font size.