My query is similar to previous ones asked here: Horizontal Scrolling? and Horizontal scroll in DIV with many small DIV's inside (no text).
However, I have the additional constraint of programmatically adding div elements without knowing their size upfront. Is it still possible to achieve horizontal scroll in this scenario?
What should the HTML/CSS structure look like for this situation?
By clicking the button below, a new div element with a random width will be added, causing horizontal scrolling to occur. Key elements to note include: white-space: nowrap and overflow: scroll applied to the container; and display: inline-block set on the child divs.
var container = document.getElementById('items');
function addItem() {
var d = document.createElement('div');
d.style.width = Math.floor(Math.random() * 100) + 20 + 'px';
container.appendChild(d);
}#items {
white-space: nowrap;
overflow:scroll;
}
#items div {
display: inline-block;
border: 1px solid red;
height: 50px;
}<button onclick="addItem()">Add Item</button>
<div id="items"></div>Having an issue with my angular build. I've deployed my website at this link: It appears fine when viewed on a desktop and even in the devtools. However, when I try to access it on my phone, the layout looks terrible! Any suggestions on how to fix ...
I'm trying to create a background image that fades out as the page width decreases. I think this can be achieved using CSS transitions, but I'm not very experienced with them. So my question is, is it possible to make a background image transitio ...
As a dedicated frontend developer, I believe in creating underlines with a 2px padding instead of the default 1px. Is there an easy solution for achieving this? PS: Yes, I am aware of using a div with a black background color and 1px * Npx with position: ...
I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...
I have integrated a plugin into my project that necessitates the inclusion of the following code in its CSS file: *, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } However, t ...
After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example: Currently, the second table appears directly bel ...
I am facing some challenges in figuring out how to nest a span within another span using Bootstrap. My objective is to have a centrally aligned block, with the following structure inside: - One row containing: - A block on the left (span6) ...
Having encountered a tricky situation with CSS and flexbox, I found myself needing to implement the following properties: text-overflow: ellipsis; white-space: nowrap; overflow: hidden; However, when the text was too long, it caused t ...
What causes a vertical position change in buttons with content floated left or right? Take this example http://jsfiddle.net/8ff6dhou/ <button>aaa</button> <button><div style="float:left">bbb</div></button> <button> ...
I am trying to implement a script that will allow me to scroll to my navigation and then change the class of the navigation, however, it is not working as expected. $(window).scroll(function() { if ($(window).scrollTop == $('.menu_nav').offs ...
Is it possible to integrate PHP code into Inline CSS? Here is an example: Check out this code snippet: <div class="col-auto"> <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">%22</div> </div> <div ...
As a beginner in PHP and Bootstrap, I encountered an issue with my login form. Everything was working fine until I added <link rel="stylesheet" type="text/css" href="styles.css"> to my header. I cannot simply remove these links from my header as I w ...
My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...
After reviewing the link about setting radio button 'checked' in jQuery based on ID, I found it wasn't quite suitable for my needs. Here is my code: <label for="basic" class="basic">Gender:</label> <fieldset data-type="horizo ...
Picture this scenario: $('#blah').on('click', function(){ var cat_id = $(this).attr('id'); $.ajax({ // things... data: {cat_id: cat_id}, // <-------------------- // things... }).done(fun ...
Greetings! I have been utilizing a code snippet found from a previous inquiry, which increases the end day by two days in cases where it falls on a weekend. function add_business_days($start_date, $business_days, $holidays, $date_format){ $i = 1; $day ...
Within my ng-repeat, I have two <li> tags repeating a specific number of times. The $index is being used to determine the position of each <li>. You can view a sample on this fiddle: http://jsfiddle.net/sh0ber/cHQLH However, I would like one ...
I've recently started learning jQuery and java and I'm really trying to understand how to create multiple instances of a dialog box. In the head section of my code, I have included the following: <script src="external/jquery/jquery.js">&l ...
I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...
The layout of the header on my website's homepage is as follows: <header> <div class="navbar-lock"></div> <div class="hero"></div> </header> In this setup, div.navbar-lock represents a fixed navigation bar wit ...