Display full lines of nested tree view HTML lists upon hovering using HTML, CSS, Angular, and Bootstrap

I currently have an Angular 4 application where a left-side div displays a tree of items as recursive HTML lists. The issue I am facing is that long texts within this div get cut off by the right border, with a scrollbar appearing instead. What I would like is for the text to expand beyond the border and be displayed in a shadowed box when the user hovers over it, similar to how Windows Explorer behaves. You can view the intended behavior in the screenshots below.

Before mouse hover:

https://i.stack.imgur.com/d4YGz.png

After mouse hover:

https://i.stack.imgur.com/Jvx3Q.png

The current solution I have involves raising the entire enclosing list element, but I believe there is room for improvement. Below is the CSS code snippet I am using:

<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>ooooooooooooooooooooooooooooooooooooo</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>
htmlcssangularbootstrap-4

Answer №1

Resolved the issue by adjusting the HTML layout. Now I have nested within , and it is functioning correctly.

.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>
          </li>
          <ul>
            <li>
              <span>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on how to position a expanding textarea in line with buttons

I need assistance with aligning a textarea that is growing to the left, and action buttons positioned on the right side of the textarea. My goal is to have the action buttons aligned at the bottom, level with the expanding text area. Here is the code snip ...

htmlcssvue.js

What is causing my device form to malfunction - could it be the <form> HTML tag?

How can I resolve the issue with my devise sign up form not submitting when using the HTML "form" tag? Removing the tag allows everything to work correctly without any errors. <form> <div class="form-group"> & ...

htmlruby-on-railsdevisebootstrap-4

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

Tips for implementing an automatic refresh functionality in Angular

I am dealing with 3 files: model.ts, modal.html, and modal.ts. I want the auto refresh feature to only happen when the modal is open and stop when it is closed. The modal displays continuous information. modal.htlm : <button class="btn btn-success ...

javascriptangularbootstrap-4angular8

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

Even after assigning the class "img-fluid" to my image, it still fails to properly adjust to the screen size

I added the class "img-fluid" to my image in Bootstrap, but it's not fitting on my webpage. What should I do? <img src="images\406201.jpg" class="img-fluid" alt="..."> <div style="margin-top: 0p ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...

htmlcsshtml-emailinline-styles

Reduce the height of the navigation bar

I used the header example from Bootstrap's documents here: https://getbootstrap.com/docs/5.3/examples/headers/# The code I have is: <div class="container fixed-top bg-white"> <header class="d-flex flex-wrap justify-conte ...

cssbootstrap-5

Create a user-friendly URL using the Router navigation feature

Currently, I am utilizing the navigate function within the Router class to create a URL from a component: this.router.navigate(['/menu'], { queryParams: { level, parent: name } }); Although it functions correctly in terms of setting this.route.p ...

angular

Include various classes within the [ngclass] directive

I tried researching on SO for a solution to the following query, but I am having trouble understanding how to implement it correctly. The goal is to display a delete icon when hovering over a mat td cell, but this icon should only appear for newly added va ...

angularangular8

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

javascriptjquerycsscss-transitions

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

javascripthtmlonmouseovergrayscaleonmouseout

Alignment of Bootstrap responsiveness shifted to the left rather than the center

My HTML Code: <div class="gridrow" id="eventsrow"> <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white"> <div class="event container"> <div clas ...

htmlcsstwitter-bootstrap

Tips on removing pesky favicons

Not too long ago, I purchased a domain and configured it with Wordpress. Eventually, I decided to switch to a static landing page so I uninstalled Wordpress. But now there's an unfamiliar favicon that has appeared on my site. Even after deleting all ...

htmlwordpress

Ways to Randomly Flip Divs

I have developed an application where all divs flip vertically on hover. I am looking for a way to make the flipping random without requiring a hover. Any ideas on how to achieve this? .vertical.flip-container { position: relative; float: left; ma ...

javascriptjqueryhtmlcss

Having trouble importing modules from @types/node

Currently, I am in the process of developing an Electron application with Angular. My goal is to gather information about my PC and execute certain commands within the app. I have been attempting to utilize the os and child_process modules, but unfortunate ...

node.jsangularnpmelectron

Ways to implement multi-file loading on a website using separate HTML segments

Currently, I am working on a website for my local community. Each page contains similar content like header, navigation bar, and footer. I want to streamline this process by storing these common elements as separate HTML files. Is it possible to link the ...

html

What are some ways I can make my content come alive on my website using the Tympanus examples

After spending hours searching for a way to add animation to my content, I finally found a technique that seemed promising. Despite following the same steps as outlined in the tutorial I found, I was disappointed to discover that there was no animation o ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

The router.navigate() function seems to be malfunctioning as it is not working as

I have a method defined as follows: private redirect(path: string): void { this.router.navigate([path]); } This method is called within another method like so: private onError(error: any): void { switch (error.status) { case 401: / ...

javascriptangularreactjstypescriptangular2-routing

Programmatically selecting a row in Angular Datatables

I have an Angular 8 application with the Angular Datatables plugin installed. My goal is to programmatically select a row based on the id parameter from the URL http://localhost:5000/users;id=1. this.route.paramMap.subscribe((params: ParamMap) => { ...

angularangular8angular-datatables