CODEWITHSUNDEEP
css
Dan
Dan

Reputation: 1745

Position: fixed inside display: table bug

I've come across a really frustrating issue. I'm working to create a menu drawer that is inside a <ul>. When the nested <div> inside the table is display: {fixed,absolute}, a whitespace placeholder shows up where another table cell would be. I can't understand why or how to get around it.

CodePen of the code is here: http://codepen.io/quicksnap/pen/gsHrb and you can toggle the topmost class to see what I'm talking about.

Appreciate any insight on why or how to retain this markup structure and get it to display fixed/absolute without altering the parent table display.

Markup: 

<ul>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <li>
    <a href=""><span>Lorem</span></a>
  </li>
  <div class="fixed"/>
</ul>

CSS: 

/*
 Why does the display: table show an empty placeholder for
 an element inside that is position: fixed/absolute?
*/

/* Comment out/remove !important to see bug */
.fixed { display: none !important; }

.fixed { 
  display: block;
  position: fixed; top: 60px; left: 0;
  width: 100%; height: 100px;
  background: salmon;
}

ul {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 60px;
  display: table;
  table-layout: fixed;
  position: relative;
  background: #ccc;
}

ul > li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Upvotes: 2

Views: 2817

Answers (3)

Dan
Dan

Reputation: 1745

It seems that display: table will render children elements in the fixed layout regardless if their display is set to absolute or fixed--If they're displaying as a block element, the cell gets drawn.

This is a simplified version of the "bug":

http://codepen.io/quicksnap/pen/xuDwG ( notice the extra space to the right of the Lorem items )

When using table-caption for an li and then nesting in a fixed or absolute element, it seems to escape the element from being drawn as a cell.

Here is an example of what I was looking for: http://codepen.io/quicksnap/pen/noBvm

Thanks ScottS for pointing out my invalid HTML--it clued me into why it works like this, though I still don't understand why the table is drawing a cell space for an element that isn't table-cell and positioned absolute/fixed.

Upvotes: 0

ScottS
ScottS

Reputation: 72271

I really don't know if this is a bug or expected behavior (I have not researched it), as it appears to do the same on a normal table element. However, it apparently has to do with the table-layout: fixed property being set. I am guessing that is because the table-layout: fixed calculates its size based on the number of columns, and it appears to be counting that as a "column element" upon page render, apparently before even recognizing that the css position: fixed pulls it out of flow. The display: none causes the element to not count (as one would expect) for column purposes.

Your issue seems to resolve by having the table (in your case ul) be table-layout: auto and then setting the cells (your li) to the appropriate width (25% in your case) unless they all have exactly the same width text.

See this fiddle for an illustration of all these things happening on a normal table element.

As a side note, a naked div in a ul is not valid html structure (the ul should only have li elements as direct children).

Upvotes: 1

wild hawk
wild hawk

Reputation: 3

What is the purpose of your div / fixed class? You can nest another ul or list however and put the "fixed" class on that. If you add height 100% then the whole background is the salmon color you have.

Upvotes: 0

Related Questions