Marco Sacchi Marco Sacchi - 6 months ago 12
HTML Question

HTML: Show full content of non-floated element on tree/menu structure

I need to properly skin a menu/tree like structure.

Each item is composed by three elements: two floats (one left and one right) and the last non-floated to fill the remaining space automatically expanding the container when possible.

In the first level all renders properly but on sub-levels the width of container is too small.

NOTE: I need each level

ul
container will be independently sized based on its content.

HTML example structure:

<ul>
<li>
<div class="link">
<span></span>
<span>3434</span>
<span>Item 1</span>
</div>
<ul>
<li>
<div class="link">
<span></span>
<span>123</span>
<span>Item 1.2</span>
</div>
</li>
<li>
<div class="link">
<span></span>
<span>312</span>
<span>Item 1.2342342</span>
</div>
</li>
<li>
<div class="link">
<span></span>
<span>12</span>
<span>Item 1.2234123</span>
</div>
</li>
</ul>
</li>
<li>
<div class="link">
<span></span>
<span>3453</span>
<span>Item 2123123123123123123</span>
</div>
</li>
<li>
<div class="link">
<span></span>
<span>34534</span>
<span>Item asdasdasd</span>
</div>
</li>
</ul>


CSS:

ul {
position: absolute;
background: white;
border: 1px solid black;
overflow: visible;
margin: 0;
padding: 0;
}

li {
position: relative;
margin: 0;
padding: 0.1em 0.5em;
}

ul>li>ul {
left: 100%;
}

.link {
display;
block;
position: relative;
}

.link>span:nth-child(1) {
display: block;
float: left;
width: 1em;
height: 1em;
margin-right: 0.25em;
background: cyan;
}

.link>span:nth-child(2) {
display: block;
float: right;
height: 1em;
margin-left: 0.25em;
background: red;
color: white;
}

.link>span:nth-child(3) {
display: block;
white-space: nowrap;
overflow: auto;
}


Here a jsfiddle to better show the problem

Answer

Finally I have found the solution using flexbox model. This method preserve also jQuery animations.

Only CSS update is needed:

ul {
  display: block;
  position: absolute;
  list-style: none;
  background-color: orange;
  border: 1px solid red;
  padding: 0.2em;
}

li {
  display: block;
}

ul>li>ul {
  left: 100%;
}

.link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  margin: 0.2em;
}

.link>span {
  display: block;
  align-self: auto;
}

.link>:nth-child(1) {
  flex-shrink: 0;
  width: 1em;
  background-color: cyan;
  margin-right: 0.25em;
}

.link>:nth-child(2) {
  order: 1;
  flex-shrink: 0;
  background-color: red;
  margin-left: 0.25em;
  white-space: nowrap;
  color: white;
}

.link>:nth-child(3) {
  flex-basis: 100%;
  flex-shrink: 1;
  background-color: yellow;
  white-space: nowrap;
}

Here the updated jsfiddle.

Comments