Twitter Bootstrap Button dropdown z-index layering issue

Question

I've been pounding and pounding on this. I have a comment section on my site with an option to edit with a Twitter Bootstrap dropdown button, but I as you can see below, it's hidden by the following comments.

enter image description here

I know it's not an overflow issue, as you can see the bottom of it under the last comment. So it can only be z-index layering issue. But I put all the comments on z-index: 4 and the dropdown on z-index: 1000, so I have no idea what to do!

Here is a jsFiddle: http://jsfiddle.net/ssL1yydx/29/

This seems to be your problem .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } Remove it — Andrew, May 12 '15 at 12:01
Thanks! That indeed is causing the issue. Didn't know that an animation cause cause issues on layering (or probable more rendering). — denislexic, May 12 '15 at 12:06
@Andrew Do you think it's the fill-mode or the whole animation? — denislexic, May 12 '15 at 12:07
Ok Fixed it with a custom instead of the animated.css library. — denislexic, May 12 '15 at 12:12
@Andrew If you mark it as an answer I'll mark it as the answer. — denislexic, May 12 '15 at 12:13

score 2 · Answer 1 · answered May 12 '15 at 12:26

2

Just have to change/add this css property

Css:

.post{
      -webkit-animation-fill-mode: none !important;
}

Fiddle: http://jsfiddle.net/ssL1yydx/31/

answered May 12 '15 at 12:26

BENARD Patrick

30,363
16
99
105

score 1 · Accepted Answer · answered May 12 '15 at 12:28

1

Try removing:

 .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

answered May 12 '15 at 12:28

Andrew

1,850
14
18

Twitter Bootstrap Button dropdown z-index layering issue

2 Answers2

Linked