Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached.
Take a look at this fiddle for reference.
The absolute positioning plays a crucial role in the document structure, so I must keep most of the css as it is.
Do you have any suggestions or ideas on how to achieve this?
Include the CSS style white-space:nowrap; within the "mli" class
Here is a demonstration on JSFiddle: http://jsfiddle.net/cWpGS/51/
It seems like the text is overflowing the container based on your description. It sounds like the issue was caused by the parent div having a narrow width. By adjusting the width of the container div, you should see less wrapping of the text:
This concept should be clear
.q-d-list-container {
display:block;
position: absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
background:#f1f1f1;
border:1px solid #C4C4C4;
}
#q-d-list {
display:block;
background:white;
border:1px solid #D4D4D4;
width: 150px;
position:absolute;
left:5px;
top:5px;
bottom:5px;
overflow : auto;
overflow-y: hidden;
white-space: nowrap;
}
.mli {
padding:4px 0 4px 6px;
margin:0;
cursor:pointer;
}
I am working on a functionality where multiple divs should be displayed or hidden based on the button clicked. Initially, all buttons and divs are visible. Upon clicking a button, only the corresponding div should be visible. Subsequent clicks on other but ...
I am currently using ListItem from Material-UI. I am attempting to increase its font weight when it is active, but for some reason the font-weight property does not seem to have any effect. Below you will find the code snippet: <List component=&a ...
I have been working on a CSS menu for a website and have made it work perfectly on Firefox, Chrome, and an old Safari version. However, I encountered a strange issue with the latest Safari version (6.0.2 on Lion). When the page is fully loaded and I hover ...
I am struggling to develop a web application that shows the IP Address of a hostname entered by the user in a text field. Unfortunately, I keep encountering an error where I can't seem to get a response from the URL. As a beginner in this field, I wou ...
With modern MP4 players, you have the ability to skip to any part of a video without needing to download the entire file. Take a look at this example video: You can navigate to any point in the video before it finishes downloading. I am curious if there ...
I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...
My website includes a div positioned below the header that contains quick links. I have implemented the solution from http://davidwalsh.name/persistent-header-opacity to ensure this div remains on-screen at all times. However, I would like it to appear a ...
Having trouble with the carousel on my website. The Navigation Bar is working, but the image slider isn't showing up despite trying multiple approaches. Bootstrap is properly linked and I've read through the documentation for the Bootstrap Carous ...
When retrieving category and sub-category information from an API json file, the API returns category objects with a "parent" attribute. Main category objects have a parent attribute equal to 0, and sub-category objects have the parent attribute equal to t ...
Although the title may seem unclear, I will clarify. I have a collection of images on the left side and I have implemented an onclick function on each one to display the image and some information on the right side. It's like having thumbnails on the ...
Looking for a solution: <ion-grid *ngIf="headerService.showSearch()"> <ion-row id="searchbar" class="main-searchbar ion-align-items-center"> <ion-col size="11"> ...
I'm having trouble aligning these social media share buttons with my inline list. I tried using vertical-align: top; on the <li> element, but it didn't work in Chrome. You can view the page here: Here is the full HTML/CSS code: <!DOCT ...
I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...
When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...
Struggling to achieve a TextField select with outlined variant and a see-through border. Here's the current theme override I'm using: overrides: { MuiOutlinedInput: { root: { backgroundColor: '#F4F4F4', borderR ...
I just implemented this code snippet to enable animated gifs to work after refreshing a webpage. It's functioning properly in Chrome, Safari, and Internet Explorer except for Firefox. Can someone please offer assistance? jQuery: $(img).css("backgrou ...
I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...
Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...
If you're curious about the code, take a look here! Here are some of the issues I'm facing: The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all) When t ...
In my efforts to ensure a consistent line width inside a textarea across IE8, Firefox, and Safari, I have encountered an issue where Firefox seems to add an extra pixel of padding compared to the other browsers. This results in text wrapping differently an ...