Madhavan Kumar Madhavan Kumar - 7 months ago 89
HTML Question

Dropdown inside table cell toggles table row height on every click

I have a drop down inside a table cell. On a click, the dropdown expands to show the menu items. But, the table row height also changes whenever the menu expands/collapses.

How can i keep the table row height constant and the dropdown gets displayed over the table. I tried setting higher z-index for dropdown container but it didn't work. As,

.menu-body{
background-color: #ea7600;
z-index:2;
}


Plunker code is here.

enter image description here

Table height must not fall below the second dark horizontal line.

Answer

You need to use absolute positioning, but that requires some minor html changes as well:

add span to th and td:

<th><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng header</span></th>

<td><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng content</span></td>

change css:

 td,th{
   position: relative;
   border: solid black 2px;
   padding: 5px;
   text-align: center;
 }

  td span,th span{
      text-overflow: ellipsis;
   overflow : hidden;
   white-space: nowrap;
   display: block;
  }

.menu-body{
     position: absolute;
     width: 100%;
 }

Updates plunker: http://plnkr.co/edit/WYyrnO5lIVFFJBCNdfNc?p=preview