Search code examples
javascripthtmljquerycssshopify

Overflow-x:auto not working inside a grid layout on fieldset at max-width media query

I'm experiencing an issue where overflow-x: auto; on a fieldset element is not triggering a horizontal scrollbar within a media query. The fieldset contains multiple div elements displayed as a grid, and I expect a horizontal scrollbar to appear when the viewport width is less than 480px.

important info: This is an A/B test being run on a Shopify store

Here's the media query and relevant CSS:

@media screen and (max-width: 480px) {
  fieldset[name="Color"] {
    background-color: red;
    display: grid;
    grid-auto-flow: column;
    column-gap: 0.5em;
    overflow-x: auto !important;
    width: 100%;
    max-width: 100%;
  }

  fieldset[name="Color"] div label {
    white-space: nowrap;
  }
}

However, the content overflows the viewport without triggering a scrollbar. I've attempted to set overflow-x: visible; on the body and html tags to ensure that they aren't constraining the fieldset, but this resulted in the entire page allowing horizontal overflow, which is not desired.

I've attached a screenshot:enter image description here showing the overflowing div elements within the fieldset in the DOM.

I have also tried:

Adding min-width on grid items. Ensuring no parent elements have overflow-x: hidden;. Using box-sizing: border-box; globally. Removing the mediaQuery Removing custom scrollbar styling.

I would appreciate any insights or solutions to achieve a horizontal scrollbar on the fieldset when the content overflows at a viewport width of less than 480px without causing the whole page to scroll horizontally.

Solution

  • I have wrapped fieldset tag to a custom wrapper (inner-wrp) and in that I have added overflow so it will not affect othe elements on your page. Please check below updated code:-

      body {
    margin: 0;
    padding: 0;
  }
  .inner-wrp {
    width: 100%;
    overflow: auto;
  }
  .main-wrp {
    padding: 20px;
  }

  /* Media query for smaller screens */
  @media screen and (max-width: 480px) {
    fieldset[name="Color"] {
      background-color: red;
      display: grid;
      grid-auto-flow: column;
      column-gap: 0.5em;
      overflow-x: auto !important;
      width: 100%;
      max-width: 100%;
    }

    fieldset[name="Color"] div label {
      white-space: nowrap;
    }
  }
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scrollbar Example</title>
</head>
<body>
  <div class="main-wrp">
    <div class="inner-wrp">
      <fieldset name="Color">
        <div><label>Red</label></div>
        <div><label>Green</label></div>
        <div><label>Blue</label></div>
        <div><label>Yellow</label></div>
        <div><label>Orange</label></div>
        <div><label>Purple</label></div>
        <div><label>Brown</label></div>
        <div><label>Black</label></div>
        <div><label>White</label></div>
        <div><label>Gray</label></div>
      </fieldset>
    </div>
    <!-- Other content outside the fieldset -->
    <div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
</div>
</body>
</html>

    Remember you can change class name anytime. I created this HTML, just to share the solution with dummy content. You need to replace with your HTML.

    Let me know if it works for you or not.