Bulma: Problem when the modal is not a direct child of html/body

Created on 15 Nov 2017  路  4Comments  路  Source: jgthms/bulma

Hello,

This is about Bulma, and is a bug/feature/question :)

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.6.1]
My browser is: Chrome
The issue is related to #1154

Description

I created https://github.com/laravel-enso/enso with Bulma, VueJs and Laravel.

The project is pretty much polished and I would like to start using it in my business projects.

But I still have this one last problem. I have a dedicated modal component that is reused in other components, and the modal not showing correctly in this situation. I feel it's too much of limiting factor to have to put the modal directly into <body>...</body>, and it seems that it affects others too.

Besides the modal background showing funny, the div below the modal is scrollable while the modal is showing.

Maybe there is a solution, or maybe you can suggest another approach.

This is a screenshot with a dedicated vue component for forms

image

Here is another one from a documents component

image

Thank you in advance!

picture aocneanu

Most helpful comment

2 of your 3 siblings are positioned:

image

.navbar and .aside are fixed with a high z-index. The .main-content is not positioned and has no z-index, but it contains the modal.

Just add:

.main-content {
    position: relative;
    z-index: 2000;
}
picture jgthms on 15 Nov 2017
👍2

All 4 comments

Since the modal is using position: fixed, it should work with a proper z-index. Have you tried increasing it?

jgthms picture jgthms on 15 Nov 2017

Yes, first thing.

If you like, you can try the online demo and play in the console, maybe something else is wrong.

Thanks.

aocneanu picture aocneanu on 15 Nov 2017

2 of your 3 siblings are positioned:

image

.navbar and .aside are fixed with a high z-index. The .main-content is not positioned and has no z-index, but it contains the modal.

Just add:

.main-content {
    position: relative;
    z-index: 2000;
}
jgthms picture jgthms on 15 Nov 2017
👍2

I really need to learn CSS.

Thank you !

aocneanu picture aocneanu on 15 Nov 2017
😄1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

leofontes picture leofontes  路  3Comments
swamikevala picture swamikevala  路  3Comments
jaredreich picture jaredreich  路  3Comments
Laraveldeep picture Laraveldeep  路  3Comments
Wikiki picture Wikiki  路  3Comments