What is the best way to create a div with 80% width that can be scrolled horizontally?

I am facing an issue with a seat map that can vary in width, ranging from 20 seats to 200. Due to this uncertainty, I want to make the seat map 80% wide and horizontally scrollable, regardless of its actual width.

My attempts to achieve this by setting:

overflow-x: auto;
white-space: nowrap;

and also:

overflow-x: scroll;
overflow-y: hidden;

have not been successful so far.

If you'd like to see the problem for yourself, you can check out this fiddle with the code: https://jsfiddle.net/ywzb365t/

The specific div I need to be horizontally scrollable is identified as #seat-map.

You may notice the issue when resizing the window horizontally – if I don't make it 100% wide and horizontally scrollable, the seat rows become jumbled up.

I believe it's just a small detail that I'm missing, but I haven't been able to figure it out myself. Any assistance would be greatly appreciated.

htmlcss

Answer №1

Always ensure that the seatCharts-row matches the content and that the seatCharts-container has the overflow-x:auto property set.

I've provided a quick solution here to adjust the width of seatCharts-row.

Insert this code snippet at the end of your $(document).ready(function()


$(".seatCharts-container").css({ overflow:"hidden",  "overflow-x" :"auto" })

$(".seatCharts-container > .seatCharts-row").each(function(){
   var width = ($(this).children().length * $(this).children().first().outerWidth(true))
   $(this).width(width)      
})

Answer №2

Switching:

div.seatCharts-cell {
  float: left;
}

with

div.seatCharts-cell {
  display: inline;
}

causes the content to scroll horizontally, but it's uncertain if this is the intended result. Perhaps Alen has a more suitable solution.

Answer №3

After adjusting the width of .wrapper to 80%, I then optimized the width of .seatCharts-line to be set at max-content.

You can view the updated code on this fiddle link. Does this align with your requirements?

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

Allow CSS variables to cascade down to child components

I'm currently working on a project using Polymer 2 to create a collection of components. However, I've encountered an issue with CSS variables when viewing the components in browsers other than Chrome. One of my components, a wrapper component c ...

cssweb-componentpolymer-2.xshadow-domshady-dom

Display various DIV elements based on dropdown selection in Angular using ngModel

My webpage consists of three separate div elements: div1, div2, and div3. I am looking for a solution where div1 and div2 are displayed upon the first selection, div1 and div3 upon the second selection, and div2 and div3 upon the third and final selectio ...

htmlcssangularangular9angular12

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

javascriptjquerycssparallaxparallax.js

Ways to create distance between elements within a row

Trying to align 3 cards in a row within an angular 10 project has been challenging. While the cards line up horizontally on mobile devices, I'm struggling to create proper spacing between them on desktop. I've attempted adjusting margins and padd ...

htmlcssangulartwitter-bootstrapbootstrap-4

"Encountering issues with updating the .css file while debugging in ASP.NET MVC 2, changes

I've been working on an MVC 2 Project and ran into an issue. I made changes to the attributes of an id in the Site.css file, specifically changing the color from White to Red. However, when I run the application, the changes are not reflected on the v ...

cssasp.net-mvc

Adding new divisions to an already existing division with angled borders

I am currently attempting to create a header similar to the one displayed in the attached image. Despite trying various solutions found on this platform, I have not been able to achieve the desired result. I have managed to work out the text and logo eleme ...

javascripthtmlcssimage

Modify all content located between two specified text or strings

My goal is to replace the content between [lorem] and [/lorem]. For example: [lorem]Here goes some text[/lorem] should be transformed into This is inside a lorem block I was able to achieve this with [[Here goes some text]], using var block = $(&apos ...

javascriptjqueryhtml

Obtain the CSS selector string of a WebElement using Selenium WebDriver in Java

My task involves working with a WebElement and my goal is to extract the CSS selector string from it. During code debugging, I found this value stored in a variable: [[ChromeDriver: chrome on MAC (345345345n5435345b34)] -> css selector: div[class=& ...

javacssselenium-webdriver

Bootstrap sliders stagnant and unresponsive

I am encountering an issue with my bootstrap carousel slide. I have configured the buttons and set it to slide automatically, but for some reason, the carousel is not moving when I click on the buttons. I can't figure out what mistake I might be makin ...

htmlcssbootstrap-4

What steps should I take to preserve past data within a variable?

Let's say I have a variable that stores text entered into a textarea. If I update the text in the textarea, I want to compare the old value stored in the variable with the new value. One way to approach this is by using two variables for comparison. H ...

javascripthtml

Change the Background of Your Body?

Here's the deal. I'm looking to create a cool effect where the background of the body slowly fades out and changes periodically in a loop using CSS and jQuery. Any suggestions on how I can make this happen? Appreciate your help! ...

javascriptjquerycssbackgrounddocument-body

Typescript Angular2 filtering tutorial

In Angular 2 using TypeScript, the goal is to search for matching values from an array within an object array. The intention is to filter out any objects where the 'extraService' property contains any of the values from the 'array_values&apo ...

javascripthtmlangulartypescript

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

htmlcss

Is it possible to still alter options in a read-only Select component in Twitter Bootstrap

Even though I have set my bootstrap select to readonly="true", I am still able to change the selected option. I tried using disabled="true", but then the select is not included when submitted. Is there a way to achieve a combination where the selected op ...

jquerycsstwitter-bootstraptwitter-bootstrap-3yii2

Floating action button within a collapsible panel

I am having trouble placing a fixed-action-btn inside a collapsible body. It keeps appearing in the bottom right corner of the page instead of within the collapsible itself. How can I ensure that the button stays inside the body? Check out this link for r ...

javascriptjqueryhtmlcssmaterialize

Interacting with a DIV element can also have an impact on the links within

Below is my current CSS code: .contact{ padding:1rem; background:#023B6C; padding:1rem; position:fixed; right:-20px; top:27%; z-index:99; border-radius:5px 5px 0 0; border:2px solid #fff; transform:rotate(-90deg); transition:all .5 e ...

csshtmlhover

Is it feasible to create a translucent overlay that sits atop another element without hindering or intercepting mouse clicks using CSS and JavaScript?

I'm looking to overlay one layer on top of another without capturing input. My aim is to place a PNG image over my webpage in order to achieve a filter-like effect. The issue I'm facing is that when the overlay is in place, the text becomes uns ...

javascripthtmlcsstransparent

Challenges with navbars and Bootstrap

Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...

csstwitter-bootstrapnavbar

How can Smarty's {foreachelse} be helpful in programming?

Exploring a Coding Dilemma: <table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> {foreach from=$users item=user} ...

htmlforeachsmarty

Bottom line - incorporate two contact paragraphs with a separation in between the two sets of info

Greetings to all users of the web, I am encountering a perplexing issue. Here is my HTML code: #footer { position: absolute; left: 500px; bottom: 0px; } .contact_footer{ float: left; display: inline; } <footer> <div id="footer"> & ...

htmlcssspacing