5

I created a row with horizontal scrolling for all contained col.

I used an answer to this question: Bootstrap 4 horizontal scroller div

However, I found that the elements inside the container are clipped. Now on some OS-Browser combinations (e.g. MacOS+Chrome) the scrollbar is hidden unless it is hovered by the mouse and in a test one of our users was not able to find the next (clipped) col element.

I'd like to know how to "unclip" the elements beyond the container width, so that user can immediately see that there is more content that requires scrolling.

Edit:

The related code is from this answer, and also posted on codepen.

Edit 2:

Note, that I want to prevent the container from being moved on scroll.

Jankapunkt
  • 8,128
  • 4
  • 30
  • 59

3 Answers3

2

The scrollbars staying hidden is an OSX feature that users have to opt-out from if they want scrollbars to stay visible. There is not much that you can do to force them to stay visible. But you could style them explicitly so chrome and safari will show then at least.

You could test for Mac Os and chrome / safari combo, as this is a platform specific problem. Then you can override the styling for the scrollbar. This forces it to be shown.

.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;
}
Steven Kuipers
  • 809
  • 7
  • 19
  • The scrollbar is on my OSX also hidden on Firefox and Safari when opening the codepen from the question. Adding the css you posted made the scrollbar actually disappear =0 (Reproduce: OSX 10.14.3, Chrome 72.0.3626.119, FF 65.0.1, Safari 12.0.3) – Jankapunkt Mar 18 '19 at 12:52
  • Ah yes because I also set overflow-x to scroll. I edited my post to clarify. – Steven Kuipers Mar 18 '19 at 13:06
  • This is working. However I would like to wait until the end of the bounty period to see if there is still a solution that prevents the elements from being clipped when scrolling is active. If there won't be any viable answer I will accept this one as a compromise solution. – Jankapunkt Mar 18 '19 at 13:55
  • Yes, please leave it open, if there is another way to force scrollbars on OSX I would like to know it as well. – Steven Kuipers Mar 18 '19 at 16:19
1

As you said that you want it as table-responsive in which all the divs by default take equal width of the available width of the parent, then you shouldn't use col-sm-4. The divs with this class will have 33.33% width of the parent and your others divs will surely not visible with this.

So for responsive divs you can edit this code in this way. Added link for Codepen here.

<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; }
Techie_T
  • 415
  • 3
  • 14
  • Thank you for your contribution. Unfortunately does this cause the container to be moved by horizontal scrolling, too. The reference to `table-responsive` was just for giving an example of how it should behave. – Jankapunkt Mar 15 '19 at 13:22
  • I just checked and I think `table-responsive` is a bad reference here. I just really want to prevent the clipping when scrolling. – Jankapunkt Mar 15 '19 at 14:55
1

You need to override the default scroll bar colors and behaviour 

.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 brwosers expet 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;
}

Otherwise you could do it with JS instead of css

mooga
  • 3,136
  • 4
  • 23
  • 38
  • But this also just manipulates the scrollbar. This could be an alternative solution but I'd still like to see if the clipping could be circumvented. – Jankapunkt Mar 20 '19 at 14:26
  • I'm thinking this is more a ux-problem than a code-problem. You have some sideway-scrolling content with no indication that scrolling is possible. A scrollbar is a good indication, but OSX has removed them, and even though you can force them back into webkit, that still leaves FF. It seems you want the possibility of scroll to become apparent when the user starts to interact with the element. So that still leaves the possibility of it not being discovered. Why not just expose a bit of the 4th box. – Kjetil Hansen Mar 20 '19 at 23:42
  • That exposing of the 4 th box was already on my mind but how achieve this with Bootstrap's 12 sized grid with elements below 5? – Jankapunkt Mar 21 '19 at 06:46