How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling

Question

How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling

In order to allow for horizontal scrolling of all contained columns, I created a row using the row class.

To implement this feature, I followed advice from a contributor on Stack Overflow. You can view their answer by following this link: Bootstrap 4 horizontal scroller div

Despite successfully creating the horizontal scroll functionality, I encountered an issue where elements within the container were being clipped. This problem was especially noticeable in certain OS-Browser combinations, such as MacOS and Chrome, where the scrollbar remained hidden until hovered over by the mouse. One user even had difficulty locating the next clipped column element due to this behavior.

I am seeking guidance on how to ensure that elements beyond the container width are not clipped, thereby providing users with a clear indication that additional content is present and requires scrolling.

Edit:

The relevant code snippet can be found in this answer, and has also been shared on codepen.

Edit 2:

It is important to note that I am looking for a solution that prevents the container from shifting during scrolling.

css scroll bootstrap-4 overflow clipping

Answer 1

Answer №1

One of the unique features in OSX is that the scrollbars remain hidden by default, requiring users to manually opt-out if they prefer them to be always visible. Unfortunately, there isn't a direct method to force the scrollbars to stay visible across all platforms. However, you can apply custom styles specifically for Chrome and Safari on Mac OS to ensure the scrollbars are displayed.

To address this platform-specific issue, you can detect Mac OS with Chrome/Safari combination and then override the scrollbar styling. By doing so, you can compel the scrollbars to appear consistently.

.testimonial-group > .row {
  overflow-x: scroll;
  white-space: nowrap;
}

.testimonial-group > .row::-webkit-scrollbar-track
{
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   border-radius: 10px;
   background-color: #F5F5F5;
}


.testimonial-group > .row::-webkit-scrollbar
{
  width: 0px;
  height: 12px;
  background-color: #F5F5F5;
}

.testimonial-group > .row::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #555;
}

Answer 2

One of the unique features in OSX is that the scrollbars remain hidden by default, requiring users to manually opt-out if they prefer them to be always visible. Unfortunately, there isn't a direct method to force the scrollbars to stay visible across all platforms. However, you can apply custom styles specifically for Chrome and Safari on Mac OS to ensure the scrollbars are displayed.

To address this platform-specific issue, you can detect Mac OS with Chrome/Safari combination and then override the scrollbar styling. By doing so, you can compel the scrollbars to appear consistently.

.testimonial-group > .row {
  overflow-x: scroll;
  white-space: nowrap;
}

.testimonial-group > .row::-webkit-scrollbar-track
{
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   border-radius: 10px;
   background-color: #F5F5F5;
}


.testimonial-group > .row::-webkit-scrollbar
{
  width: 0px;
  height: 12px;
  background-color: #F5F5F5;
}

.testimonial-group > .row::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #555;
}

Answer 3

Answer №2

Instead of using col-sm-4 for equal width divs in a table-responsive layout, it is recommended to make adjustments to ensure all divs take up the available width of the parent container.

To achieve this responsive design, you can modify the code as shown below. Here is the link to the updated CodePen demo.

<div class="container testimonial-group">
 <div class="row text-center flex-nowrap">
 <div class="col">1</div><!--
  --><div class="col">2</div><!--
  --><div class="col">3</div><!--
  --><div class="col">4</div><!--
  --><div class="col">5</div><!--
  --><div class="col">6</div><!--
  --><div class="col">7</div><!--
  --><div class="col">8</div><!--
  --><div class="col">9</div>
 </div>
</div>

CSS

/* The heart of the matter */
.testimonial-group > .row {
  white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
  display: inline-block;
  float: none;
 }

 /* Decorations */
.col { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; 
}
.col:nth-child(3n+1) { background: #c69; }
.col:nth-child(3n+2) { background: #9c6; }
.col:nth-child(3n+3) { background: #69c; }

Answer 4

Instead of using col-sm-4 for equal width divs in a table-responsive layout, it is recommended to make adjustments to ensure all divs take up the available width of the parent container.

To achieve this responsive design, you can modify the code as shown below. Here is the link to the updated CodePen demo.

<div class="container testimonial-group">
 <div class="row text-center flex-nowrap">
 <div class="col">1</div><!--
  --><div class="col">2</div><!--
  --><div class="col">3</div><!--
  --><div class="col">4</div><!--
  --><div class="col">5</div><!--
  --><div class="col">6</div><!--
  --><div class="col">7</div><!--
  --><div class="col">8</div><!--
  --><div class="col">9</div>
 </div>
</div>

CSS

/* The heart of the matter */
.testimonial-group > .row {
  white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
  display: inline-block;
  float: none;
 }

 /* Decorations */
.col { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; 
}
.col:nth-child(3n+1) { background: #c69; }
.col:nth-child(3n+2) { background: #9c6; }
.col:nth-child(3n+3) { background: #69c; }

Answer 5

Answer №3

To customize the appearance and functionality of the scrollbars, you must override the default styles.

.row {
  overflow-x: scroll;
  scroll-behavior: smooth;
  align-items: left;
  justify-content: left;
  flex-direction: row;
}
.col-sm-4 {
 display: inline;
 align-items: left;
 justify-content: left;
}
/*scroll bar style all browsers except IE & Firefox*/
::-webkit-scrollbar {
  width: 8px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #787c7d;
}

Alternatively, you can achieve this using JavaScript instead of CSS.

Answer 6

To customize the appearance and functionality of the scrollbars, you must override the default styles.

.row {
  overflow-x: scroll;
  scroll-behavior: smooth;
  align-items: left;
  justify-content: left;
  flex-direction: row;
}
.col-sm-4 {
 display: inline;
 align-items: left;
 justify-content: left;
}
/*scroll bar style all browsers except IE & Firefox*/
::-webkit-scrollbar {
  width: 8px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #787c7d;
}

Alternatively, you can achieve this using JavaScript instead of CSS.

How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling

Answer №1

Answer №2

Answer №3

Similar questions

Do you know of any online platform that can help me convert W3-theme colors into RGB values?

How can I center two div buttons within a bootstrap column?

How can I stop React from automatically scrolling the page when re-rendering?

Is there a way to achieve a similar outcome on my site?

Divide text to reduce its width within the confines of a specific height on a div element

"Why does the font on my website look different on my computer before I upload it to my web host? How can I fix

identifying the :hover state of a link that has a distinct ID

The angular-block-ui feature fails to run my HTML code as a personalized message

VueJS3 and Vuetify are in need of some additional CSS classes

What is the method for determining the intersection of multiple rgba values?

Building an expandable vertical dropdown with Bootstrap that opens with a click

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

Vue.js displaying incorrectly on Windows Server 2019 IIS post deployment

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

The HTML element <p> is not spilling over onto a new line

Customizing a toggle checkbox in Bootstrap 5: A guide to personalization

Steps for aligning an image in the center above two divs

Is there a way to log and process div data posted using jQuery in CSS format?

Arranging fixed-width <div>s in rows of four for a sequential display

Style the ul and li elements inside a div using CSS