In my Angular 4 application, I have a left div that displays a tree of items as recursive HTML lists. When there is a long text, it gets cut off by the border of the div and a scrollbar appears. I want to have the text expand beyond the border and show in a shadowed box when the user hovers over it, similar to how Windows Explorer handles it.
Here is the layout without mouse over:
https://i.sstatic.net/d4YGz.png
And here is how it should look with mouse over:
https://i.sstatic.net/Jvx3Q.png
I tried implementing Matthias' solution for flat lists, but since I need a recursive tree-like list, I need to make some improvements.
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px 0;
border-right: 1px solid #eee;
}
.sidebar li {
overflow-x: hidden;
background: white;
}
.sidebar li:hover {
list-style-type: none;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
overflow: visible;
border: 1px solid #cacaca;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-4 col-md-3 d-none d-sm-block sidebar">
<div>
<ul>
<li>
<span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
</li>
<li>
<span>oooooooooooooooooooooooooooooooooooo</span>
<ul>
<li>
<span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</span>
</li>
</ul>
</ul>
</div>
</nav>
<main role="main" class="col-sm-8 ml-sm-auto col-md-9 pt-3">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</main>
</div>
</div>