CODEWITHSUNDEEP
jquerycss
roiwew
roiwew

Reputation: 65

Expanding child (in small parent element) element on hover (depending on elements quantity)

I have table where there are small elements (about 20px) with number (how many times something was used). On hover there is displayed child element (position absolute) which contains places where it was used. So there are links and it may be even few hundred px width. HTML looks like that:

.el-used {
  position: relative;
  margin-left: 4px;
  padding: 1px 6px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7d6d5;
  font-size: 0.938em;
}

.el-used:hover {
  background: #ff6840;
  color: #fff;
}

.el-used .list {
  position: absolute;
  top: 0;
  left: 0.9em;
  display: none;
  width: 20em;
  padding: 15px;
  z-index: 10;
  border: inherit;
  border-radius: 3px;
  color: #666;
  background: #fff;
}

.el-used:hover .list {
  display: inline-block;
}

.el-used .list a {
  margin-right: 15px;
  white-space: nowrap;
}
<div><span class="el-used">1<span class="list">Wszystkie</span></span>
</div>
<div><span class="el-used">1<span class="list"><a href="/1">O firmie</a></span></span>
</div>
<div><span class="el-used">6<span class="list"><a href="/">O firmie</a> <a href="/4">Oferta</a> <a href="/5">Podstrona 1</a> <a href="/6">Podstrona 2</a> <a href="/8">Podstrona 4</a> <a href="/2">Mapa strony</a></span></span>
</div>

Problem is that I must set that width:20em; if I don't want every link element to be in separate row. Because as I assume that .list element is trying to fit in parent (.el-used) so it has small width and text is wraped. I would like to set (instead of that width) only e.g. max-width:20em and it will shrink if there is only one element and grow (up to these 20em) when there are more elements.

Some suggestions how I can solve it?

Upvotes: 0

Views: 72

Answers (1)

Oliver Baumann
Oliver Baumann

Reputation: 2289

Please note that I refactored your HTML quite a bit:

  • things that are a list should be marked-up as such, hence the <ul>
  • take care when nesting elements: a div should not reside within a span
  • beware of elements' default display-property: spans are inline, whereas divs are block; understanding this will allow you to leverage the full power of CSS: inline follows text flow, whereas block causes breaks and can have padding/margin

Edit

Since you mentioned you want your markup to reside in a table, I edited my original answer to account for this. Basically, setting the list items to white-space: nowrap; prevents them from linebreaking internally.

I also added a class .wide which manually specifies how wide boxes with several elements should be. You have to set this width manually; at least I couldn't think of a solution without fixed widths. Below are two examples: (6) has .wide and the list items spread out, (12) does not have .wide and hence they lign up below each other.

td {
  border: 1px solid black;
}

.wrapper {
  position: relative;
}

.el-used {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d7d6d5;
  font-size: 0.938em;
}

.el-used:hover {
  background: #ff6840;
  color: #fff;
}

.el-used .list {
  position: absolute;
  top: 0;
  left: 0.9em;
  display: none;
  padding: 15px;
  border: inherit;
  max-width: 20em;
  border-radius: 3px;
  color: #666;
  background: #fff;
  z-index: 10;
  list-style-type: none;
}

.el-used .list.wide {
  width: 15em;
}

.el-used:hover .list {
  display: block;
}

.el-used .list li {
  display: inline-block;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">1
            <ul class="list">
              <li>Wszystkie</li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">1
            <ul class="list">
              <li><a href="/1">O firmie</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">
            6
            <ul class="list wide">
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second
        <div class="wrapper">
          <div class="el-used">
            12
            <ul class="list">
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
              <li><a href="/">O firmie</a></li>
              <li><a href="/4">Oferta</a></li>
              <li><a href="/5">Podstrona 1</a></li>
              <li><a href="/6">Podstrona 2</a></li>
              <li><a href="/8">Podstrona 4</a></li>
              <li><a href="/2">Mapa strony</a></li>
            </ul>
          </div>
        </div>
      </td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions