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;
}
Check out this simple JavaScript function below. <html> <head> <script> $(document).ready(function() { $.get('getImage.php', function(data) { $('#imageSelector').html("<select>" + d ...
Let's say we have a button with lengthy text: [Click here to find out more] Due to its length, the text may be split on smaller screens like this: [Click here to find out more] The goal is to align the text to the left when wrapped and to the ce ...
Within this div, I have set the width and height to be 250px. Specifically, the h1 element inside the div has a height of 50px. Users who are updating content on my website can input any text they desire within this box. However, when the text within the ...
How can I set an equirectangular projection like the one in this example http://bl.ocks.org/mbostock/3757119 as a background for only the chart above the X-axis? Alternatively, is it possible to use an image of a map as a CSS background instead? .grid . ...
On my website, I have implemented a login system using LocalStorage and would like to incorporate an error message feature for incorrect entries. Since I already have assistance for handling email errors on another page, I am interested in applying that sa ...
While designing this login form on the HTML ionic mobile UI, everything looks good except for one thing - I want to hide the horizontal line that appears between the "Forgot Password" label and the LOGIN button. Is there a way to do this? Login.html: < ...
I have a JavaScript file called dmreboot_service.js in my /js folder. By running this file with the command node /js/dmreboot_service.js, it successfully triggers a direct method in Azure. My goal is to be able to run this function or file when a button o ...
Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...
This is how I've set up my webpage design. <div layout="column" layout-fill ng-controller="MainCtrl as mc"> <header> <md-toolbar md-scroll-shrink> <div layout="row" layout-align="center center" flex> ...
Hey there, I'm currently attempting to determine the exact width of a specific element and display an alert that shows this width. The code I am using is as follows: HTML Element <table cellspacing="1" cellpadding="5" style=";width:975px;border: ...
Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...
In one of my web pages, there is a div that I'll refer to as div1. Within this div, there is a link called 'Link1'. My goal is to click on Link1, triggering the replacement of div1 with div2. Inside div2 there will be another link, let&apos ...
I have encountered an issue when trying to run my index.html file with the control.js file that I outsourced. It seems like they are not working together properly: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.c ...
My webpage has both vertical and horizontal scroll bars, but when I use window.print(), it only prints the visible content in the window. Is there a way to print the entire scrollable content within the window? ...
I have been researching how to create a circular progress bar using canvas, and I came across this code. After making some modifications to the code snippets that I found online, I encountered an issue - I can't seem to reload the circular path once i ...
Currently, I am utilizing window.open to initiate a new window in javascript and my goal is to identify clicks made within the child window. Essentially, if a click event occurs in the child window, I aim to modify the parent window accordingly. I have a ...
.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...
Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is ...
Having an issue with keeping text centered in the middle of a div that overlaps an image. It looks fine on desktop but when I try to make it mobile-friendly, things go haywire. I believe the problem lies in using fixed heights for the div, as setting heigh ...
I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly. Here is the desired format I want to achieve: 1. Acknowledgements 1.1 blah, blah .... 1.2 blah, blah .... 1 ...