Bulma: Icons in front of other elements

[xereda]

Overview of the problem

This is about the Bulma CSS framework

Description

Icons are getting in front of other elements. I need to leave them with a lower z-index.

Icons always behind other elements.

Actual behavior

Icons in front of other screen elements.

Look at this:

[jgthms]

Where does that dropdown come from? Can you set a higher z-index for that?

[xereda]

I can, but as I have 3 elements of this on the screen, when I report a z-index to him, one ends up getting over the other. The question of my select is that it opens up or down depending on the position of the screen scroll. So it gets difficult to set a z-index for them. The easiest thing would be to define a z-index for the icons. They are the only ones who get on top.

Can you help me do that? Thank you.

[Technologeek]

@xereda Mind linking to your code either on codepen or just post here ? I think I can help you out.

[jgthms]

The icons have a z-index of 1 or 2 I believe. It is required for them to show up above the input next to them. It's not possible to remove it.

But z-index is a relative property. You need to set a higher one on your custom dropdowns.

[xereda]

But note that only with the native classes of the Bulma Framework, the order of presentation of the icons is already incorrect.

JSBIN: https://jsbin.com/zipuboj/15/edit?html,js,console,output

[xereda]

The icon-related class should not be z-index 1 or 2 only. Must be bigger ...

[jgthms]

Mmmh fair enough. LMHAL

[jgthms]

636

[mtrabelsi]

they advertise it as the new generation of css framework, but if you start using it you see alot of hacks and anti patterns, sorry but it is true!