Skip to content

Rightmost tab not shown unless cut off #5

@cdsaenz

Description

@cdsaenz

First thanks for you hard work! I'm trying to use this plugin to scroll a tabs/pills list. It's great (it even focus the selected item on load!) but somehow the last item is not displayed probably because they're long titles in the links.

Looking at Chrome's Inspect tool I see that if I make scrtabs-tabs-movable-container wider by hand, it will show the last item..
Any idea what can I try? Thanks!

   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Taxes Calendar</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Commercial Bulletins</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Economic information</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Business information</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Some Bulletin                      </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Some Bulletin                     </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      Some Bulletin                     </a>
   </li>
   <li class="nav-item">
      <a class="nav-link active" href="some_url">
      Most definitive important information </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="some_url">
      News Item Too Long To Fit</a>
   </li>
</ul>```

$('.nav-pills').scrollingTabs({
   /*forceActiveTab: true,*/
   bootstrapVersion: 4,
   scrollToTabEdge: true,
   handleDelayedScrollbar:true
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions