Dropdown Scroll Bar Position

Question

So far I have achieved this:

What I want is the scroll bar position on the right side with padding. Something like this:
My HTML:

<div class="dropdown">
        <div id="dropdown-label" class="dropdown-active" data-toggle="dropdown"  title="{{selected.label}}">
          <i class="g2icon-user-dropdown dropdown-entity-icon"></i> {{ selected.label }}
          <span class="right-icon glyph-2 fa fa-chevron-down"></span>
        </div>
        <ul class="dropdown-menu" aria-labelledby="dropdown-label" lr-infinite-scroll="loadMore">
          <!-- My Organizations-->
          <li class="col-md-12 full-s calendar-list-break">
            <span>My Organization</span>
          </li>
          <li class="col-md-12 full-s calendar-item" ng-repeat="item in items | filter: 'organization'" title="{{item.label}}">
            <span ng-click="selectOption(item.id)"><i class="dropdown-entity-icon"></i> {{item.label}}</span>
          </li>

          <!-- My Groups -->
          <li class="col-md-12 full-s calendar-list-break">
            <span>My Groups</span>
          </li>
          <li class="col-md-12 full-s calendar-item" ng-repeat="item in items | filter: 'group'" title="{{item.label}}">
            <span ng-click="selectOption(item.id)"><i class=" dropdown-entity-icon"></i> {{item.label}}</span>
          </li>
        </ul>
      </div>

My CSS:

.dropdown {
@include modal-scrollbar; //etc etc
}

My SASS mixin looks like this:

@mixin custom-scrollbar() {
  ::-webkit-scrollbar {
    width: 12px;
  }

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

  ::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px darkgrey;
  }
}

How can I achieve this? Thank you. NOTE: I didn't find something useful googling around.

My problem description is very simple. I just want scroll bar position on the right with some little padding-left. — haMzox, Jun 07 '17 at 07:18

score 1 · Accepted Answer · answered Jun 07 '17 at 07:48

1

Refer this: Link It has added a position and set the right property of the parent div element(In this case your dropdown class) hence the overall effect will look like the same as you want.

answered Jun 07 '17 at 07:48

Jay Patel

2,341
2
22
43

Dropdown Scroll Bar Position

1 Answers1