1

I've already read a few question-answer pairings on Stack, all of which advocate wrapping your overflowing content element inside of a different div element in order to make it look like the scrollbar from the first element has been offset from its right edge. The below question illustrates my goal graphically: CSS: Possible to "push" Webkit scrollbars into content?.

<div class="col-xs-10 col-xs-offset-1 dropdown" id="filter1">
  <button class="btn btn-default dropdown-toggle btn-block" type="button" data-toggle="dropdown">    
    Button Name
  </button>
  <div class="formatting_wrapper">
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="disc_menu filter"><a role="menuitem">Option 1</a></li>
    <li role="presentation" class="disc_menu filter"><a role="menuitem">Option 2</a></li>
  </ul>
  </div>
</div>

So when I wrap the above <ul> element inside of an extra div (.formatting_wrapper), it does allow me to create the illusion that I've offset the scrollbar.

My problem is that the toggle button no longer functions properly: It will open and close correctly, but only once. After that it retains the focus / open border and will not de-activate or open a second time. Essentially it freezes.

What can I do if I want to retain the scrollbar formatting AND keep BS working as intended? I tried to look into the dropdown.js for BS but I'm kind-of a javascript novice.

Cheers

Edit: Here is a working example of my problem in Fiddle.

Community
  • 1
  • 1
Vercingetorix
  • 253
  • 2
  • 12
  • Could you please provide a working example of your problem? http://www.bootply.com/new# for example – Sebsemillia Oct 14 '14 at 22:28
  • @Sebsemillia: Added a fiddle for you in the original post. Thank you. – Vercingetorix Oct 15 '14 at 16:26
  • 1
    You can make the 'dropdown-menu' element behave as your wrapper element too. http://jsfiddle.net/4hcdk25a/9/ – Marcelo Oct 15 '14 at 16:37
  • @Celmar: Your suggestion doesn't solve the problem. The only way I can find to offset the scrollbar from the right edge of the element is to embed it within another div element whose background color is the same as the child element's and then add padding. Your scrollbar is still up against the right edge. – Vercingetorix Oct 15 '14 at 22:13
  • adding transparent border is not helping? – tmg Oct 16 '14 at 07:48
  • @tmg: I was adding a border to the trackbar and that did nothing. What **does** work however, I've discovered, is to add a transparent border to the _thumb_ scroller. This is a solution which I haven't been able to find anywhere on Stack; surprising since the question has been asked ~4 times already. – Vercingetorix Oct 16 '14 at 13:37
  • I meant to add transparent border to "ul.dropdown-menu". Can you show an updated jsfiddle with the solution you discovered to educate us? – tmg Oct 16 '14 at 13:42
  • @tmg: see answer below – Vercingetorix Oct 17 '14 at 00:03

1 Answers1

1

It's close to perfect for what I needed: By altering some of the ::webkit-scrollbar values, I was able to create the following. My goal was to produce a scrollbar which appeared to be offset from the right margin. Because I couldn't wrap it in a div, I did the following:

1) Adjusted the width of the scrollbar to make it wider (let x = width).

2) Added a border to the thumb which has the same color as the background. Border must be less than x/2, otherwise it occludes the thumb's background color entirely.

Note 1: I tried to make the border transparent but it seemed to let the thumb's background color show through, eliminating the offset effect.

Note 2: Adding the border will not only make the thumb look like it's offset from the edge, it will also offset it by the same amount from the top and bottom of the frame.

I exaggerated the amount of offset in my fiddle to highlight the method.

Vercingetorix
  • 253
  • 2
  • 12