CODEWITHSUNDEEP
htmlcss
RFang
RFang

Reputation: 167

CSS - Outer element width not being overwritten

jsfiddle: https://jsfiddle.net/zem4c7wf/

So what I'm trying to do is have a text element with a short width restriction, like it existed within a left pane. (.under & width: 160px in this example)

When you hover over it, another text element will display over it (.over & width: 300px). However, the .over text element does not respect the width I gave it, and instead is going off of it's parent width (.under)

I tried using a z-index and position: absolute, but I can't get the hover text to display fully.

Any help would be greatly appreciated! Thank you!

Note: I can't get JSFiddle to mimic the behavior I'm seeing on my site, but when trying to make the overflow visible, it just adds a horizontal scrollbar rather than bringing the hover text completely to the forefront. (Hover text is the black line)

enter image description here

Upvotes: 0

Views: 65

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

You can fix this by adding overflow: visible; when the .under div is hovered.

CSS

.under:hover {
  overflow: visible;
}


.under {
  width: 160px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.over {
    visibility: hidden;
    background-color: black;
    color: #fff;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    top: -5px;
    left: 0%;
    z-index: 1;

    width: 300px;
}

.under:hover {
  overflow: visible;
}

.under:hover .over {
  visibility: visible;
}
<div class="under">
Something long and cut off
  <span class="over">
    Something long and NOT cut off
  </span>
</div>

JSFiddle

Upvotes: 1

Marouen Mhiri
Marouen Mhiri

Reputation: 1667

just remove the overflow: hidden from the class ".under"

Upvotes: 0

Related Questions