CSS Z-index bootstrap dropdown issue

Hello experts,

I don't know why the bootstrap dropdown appears below the other content- i tried to set z-index along with position:relative to parent elements but it doesn't work.

Here's a codepen: (I don't know why but it doesn't load bootstrap.js , maybe you could fix it- thank you.)
http://goo.gl/Sc37WR

And here's the screenshot:
http://s3.postimg.org/j0qx00q3n/z_index.jpg

Please help me guys :-)
LVL 1
Fajer39Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dgrafxCommented:
Can you determine what the zindex of the text is ?
And can you set it lower ?
Fajer39Author Commented:
Sure. You find that in the codepen too. All text is in this class:

.lastEvent {
    width: 100%;
    padding: 0 5px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 0;
  }

Open in new window

dgrafxCommented:
so the text is in a container - what is the container z-index?
use your dev tools to inspect everything and find what element is on top of your dropdown.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Fajer39Author Commented:
I don't know why you don't wanna look at the codepen...obviously I inspect everything in devTools but after many trials I just don't get it...

if you at least look at the screenshot, youl'll see the people(or contacts) icon which is an anchor that triggers the dropdown.
The anchor is in .lastEvent container which has z-index of 0. The .dropdown-menu has z-index of 1000, which is bootstrap default.
dgrafxCommented:
OK
so codepen isn't working out for me - display issues - can't see much of your element cause it's hidden by the html & css - and only one will close ...
Google Chrome

anyway ...
Fajer39Author Commented:
Well, as I said, i don't know why codepen doesn't load bootstrap.js...but I updated it, you can look again. No you will see all the things you need.- bootstrap dropdown would trigger after click on "map" or "people", do you have any idea why is this happening?
Slick812Commented:
greetings Fajer39, , I am posting because I looked at your "CODE" that you have in the codepen at -
    http://goo.gl/Sc37WR

I can not make any connection or see what your CSS has to do with your HTML stucture, Here is the "Compiled CSS" in code pen -
<style>
.lastEvents .todayEventsContainer, .lastEvents .tomorrowEventsContainer,
.lastEvents .nextEventsContainer {
  position: relative;
  z-index: 0;
  border: 1px solid #666;
  width: 350px;
}
.lastEvents .todayEventsHeader, .lastEvents .tomorrowEventsHeader,
.lastEvents .nextEventsHeader {
  position: relative;
  z-index: 10;
  height: 25px;
  text-align: center;
  border-bottom: 1px solid #D7D7D7;
}
.lastEvents .todayEventsHeader span, .lastEvents .tomorrowEventsHeader span,
.lastEvents .nextEventsHeader span {
  color: #7D7D7D;
  line-height: 25px;
}
.lastEvents .lastEventWrapper {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #D7D7D7;
  height: 55px;
}
.lastEvents .lastEvent {
  width: 100%;
  padding: 0 5px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 0;
}
.lastEvents .lastEventHeader .eventTime, .lastEvents .lastEventHeader .eventDate {
  color: #7D7D7D;
  margin-right: 10px;
}
.lastEvents .lastEventHeader .eventSubject {
  font-weight: 700;
}
.lastEvents .lastEventBody {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
}
.lastEvents .lastEventBody .eventTime {
  color: #7D7D7D;
  margin-right: 10px;
  font-size: 13px;
}
.lastEvents .lastEventBody .dropdown-menu {
  right: 0;
  left: auto;
  z-index: 1000;
}
.lastEvents .lastEventBody .material-icons {
  color: #797979;
}
.lastEvents .lastEventBody .eventDescription {
  margin-right: 10px;
  font-size: 12px;
}
.lastEvents .lastEventBody .mapDropdown .material-icons {
  font-size: 20px;
  margin-right: 5px;
}
.lastEvents .lastEventBody .contactsDropdown .material-icons {
  font-size: 20px;
}
.lastEvents .lastEventBody img.profileImage {
  height: 30px;
  width: 30px;
  border-radius: 100%;
}
</style>

Open in new window


and here is the HTML that codepen shows to me-
<div class="lastEvents">
  <div class='tomorrowEventsContainer'>
    <div class='tomorrowEventsHeader'>
      <span>Zítra</span>
    </div>

    <div class="lastEventWrapper">
      <div class='lastEvent'>
        <div class='lastEventHeader'>
          <span class='eventTime'>12:30</span>
          <span class='eventSubject'>Obed s kolegy</span>
        </div>
        <div class='lastEventBody'>
          <div class='eventDescription'>
            <span>Popis popis podsfdsddpis</span>
          </div>
          <div class='mapDropdown'>
            <div class='dropdown'>
              <a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>
                <i class='material-icons'>map</i>
              </a>
         
            </div>
          </div>
          <div class='contactsDropdown'>
            
            <div className='dropdown'>
              <a href='#' className='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>
                <i className='material-icons'>people</i>
              </a>
              
            </div>
            
          </div>
        </div>
      </div>
    </div>

    <div class="lastEventWrapper">
      <div class='lastEvent'>
        <div class='lastEventHeader'>
          <span class='eventTime'>19:15</span>
          <span class='eventSubject'>Pivo s kamarádem</span>
        </div>
        <div class='lastEventBody'>
          <div class='eventDescription'>
            <span>Popis popis podsfdsddpis</span>
          </div>
          <div class='mapDropdown'>
            {mapDropdown}
          </div>
          <div>
            <img class='profileImage' src='/images/profile_image_square.png' alt='profileImage'/>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Open in new window


But In the "White Display" at bottom, I click all over it and I never see any Drop-Down be shown? ? So the display seems useless to me for trouble shooting this? ?

In your Image you have have the drop-down with three names - "zka s axure", "Jimmy Triceps" and "Dan Nekonecny", , and I can Not find any of those in your HTML for the
    <div class="lastEvents">

in your CSS you have FIVE z-index definitions  in -
    .lastEvents .todayEventsContainer, .lastEvents .tomorrowEventsContainer,
.lastEvents .nextEventsContainer {


    .lastEvents .todayEventsHeader, .lastEvents .tomorrowEventsHeader,
     .lastEvents .nextEventsHeader {


.lastEvents .lastEventWrapper {


.lastEvents .lastEvent {


.lastEvents .lastEventBody .dropdown-menu {

- - - - - - - - - - - - - -
u have the  .lastEventWrapper  with a   z-index: 10;

and the you have  .lastEvent   with a    z-index: 0;

I do not understand this z-index setting? ?  the   .lastEvent  <div> is inside the  .lastEventWrapper <div>  ? ? Why is the   .lastEventWrapper  a z-index of 10 ?

And then I really do not understand because you have  .dropdown-menu   with a  z-index: 1000;
BUT there is NO <div> with a  class="dropdown-menu "  in your html    . . . .
you do Have a -
    <div class='dropdown'>
but I can not find any CSS for that class ? ?

For the most part, the bootstrap dropdowns are automatically set in CSS to be above (higher z-index) than the display elements, unless you change it.

I just don't see what your CSS and HTML are doing together ? ?
Fajer39Author Commented:
Thank You for your answer Slick- I removed the dropdown code because codepend isn't loading bootstrap.js for some reason in this pen, so the ul.dropdown-menu was shown badly and distort the whole layout.

I'll try to prepare a working sample for you on jsFiddle . tomorrow . I really appreatiate your attitude, thank you very much for that.

Note- I have a lot of bootstrap dropdowns in the app, and all without problems except this one... but here I just tried to mess up with other elements z-index desperately to see some change in div layers so I'm sorry for the confusion.
dgrafxCommented:
You didn't even have proper code there to look at and you get testy when I said its too much of a mess!
What a time waster!
Fajer39Author Commented:
Well, sorry dgrafx. I didn't mean it badly but you also could have said it more politely...I thought it might be enough for somebody.

Anyway, this is working example - http://goo.gl/7eM9p8

So please guys, what am I doing wrong?

Note- only "people" icon has the proper dropdown- others are only dummies...for the sake of code simplicity
Slick812Commented:
OK, I have spent some time in the code-pen you gave above, it does show the pop-up with Karel Kravaťák, Jimmy Triceps, and Dan Nekonečný  .

But no matter what I changed in the CSS in code-pen, the elements NEVER changed their layer position, the z-index, , and always gave the same incorrect display.

I can not spend any more time on this, and I do not even see why the bootstrap Default Pop menu "Show" has been over ridden and show the pop menu at a z-index lower than the menu container, the bootstrap pop menus are MADE to be above other elements, so you can see them!

What ever you have done to customize this menu, has somehow "Broken" the usual menu display, the position of the pop menu in your code-pen looks all wrong to me, not aligned to anything, but that's not your question here, just saying that I can not take time to Maybe figure out what's wrong.

Sorry.
Fajer39Author Commented:
Well, that's what is so strange about this- I didn't change a thing about bootstrap dropdown menu- only absolute positioning coordinates...

Well thank you for your feedback, but you're saying that I have it all wrong only because you didn't understand how it will work in reality from the snippet...It will be the list of calendar events and the main container would have overflow: auto on it...of course default view will be like 5 events displayed...but that's just codepen snippet and it doesn't matter, I just want to demontrate my problem in a simplest way...The dropdown is just a list of people who will be part of that event.

...I hoped somebody will help me here. Does somebody have any idea (it could be anything) what might be causing this? Bootstrap bug?
Slick812Commented:
As you indicate, I have little Idea of the actual functioning and display you need, , but You say - "It will be the list of calendar events and the main container would have overflow: "

I do not think I'd use a "MENU" structured for that kind of display, I would display a list using <div> blocks (or <ul><li> blocks), and have a jquery pop-up or message-pop to display the pop-up with Karel Kravaťák, Jimmy Triceps, and Dan Nekonečný  on it, , when an Icon is clicked in the list element.
You can then custom make this calendar list to look and act exactly how you need it, and not have to go through all the head banging effort for this menu you now have.

Asking - "Does somebody have any idea what might be causing this?"
 There may be a closing > missing in the HTML or a missing  "  in an id or class name, I looked for these but all seemed in order. The menus in bootstrap usually work, (If you use them with out change), but for me are nearly impossible to really do much "Custom" design changes in the display or the pop-up functioning.  There are a thousand other jquery menus available that are responsive and much more easy to get different displays (colors, shapes, accents, icons, images, placements) and custom looks.
RobOwner (Aidellio)Commented:
I've moved it to jsbin http://output.jsbin.com/desovo.  it is your css that's causing the issues, I think specifically:

.lastEvents .lastEventWrapper {
/*  position: relative;*//*THIS IS CAUSING THE ISSUE*/
  z-index: 10;
  height: 55px;
}

Open in new window


Here's the editable bin so have a play: http://jsbin.com/desovo/edit?html,css

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
Slick182: thanks for you feedback.

Rob: Awesome! Thank you very much Rob. Before I close this Q, could you please try to explain why this problem even occured? I wanted to have .lastEvent absolute because of centrering - now I have to use traditional padding I guess. What would you do? Thank you again.
RobOwner (Aidellio)Commented:
Can't say for sure given the amount of formatting going on, however the layering is screwed up because of the positioning.  This is intrinsic to the bootstrap dropdown js/css and changing the elements to something bootstrap isn't expecting gives undesired results.  I'm sorry I can't be any more specific as only a developer of the bootstrap code would know for sure.
If you need the content centered then as you say, you'll need to stick to traditional padding.
Fajer39Author Commented:
Thank You very much both of you guys
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.