CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Vercingetorix
Vercingetorix

Reputation: 263

Scrollbar position offset inside of a Bootstrap v 3.2 dropdown

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.

Upvotes: 1

Views: 1060

Answers (1)

Vercingetorix
Vercingetorix

Reputation: 263

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.

Upvotes: 1

Related Questions