Search code examples
csstwitter-bootstrapbootstrap-tabs

Bootstrap Tabs - Force inline-block display with horizontal scroll

I've already checked:

but both of them didn't really solve my problem.

What I have done:

I am using a free bootstrap template (sb-admin 2, which can be found here: http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html), more precisely I am actually working on the "chat" panel.

The original chat layout is:

enter image description here

What I am trying to accomplish is adding a "user list" below the "chat" text, and to accomplish such I've already made the entire server logic and, in order to be able to show / hide the chats, I'm using bootstrap's tabs : http://getbootstrap.com/javascript/#tabs (because it's way easier to control the entire flow of the chat).

In order to don't post the entire source code of the entire project (over 100k lines of code), I've replicated my proble, on a fiddle in order to post it.

The relevant part of the testing I've done is this one (it contains some twig and i'm politely asking you to ignore it, it won't be in the tags because I don't have any issue with twig):

<div class="panel-body">
        <div class="span11">
            <div class="row-fluid">
                <div class="col-lg-12">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li><li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="#aguychat__chat" data-userid="{{user.id}}" role="tab" data-toggle="tab">aguychat <span class="badge" id="aguychat__chat__badge"> 0 </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

This is what I've tried after reading all the posts about being able to scroll horizontally a set of elements, therefore what I did is:

  • create a container (span11)
  • create a fluid row (row-fluid)
  • create a col-lg-12 element (to fill the row)
  • parse inside it the entire set of elements (all <ul> <li>, all tabs).

What I was expecting was having a div with 100% width with a scrollable bar with the elements inside it, like this: http://jsfiddle.net/zLez4drz/ (warning: fiddle taken from another question where I took the informations from)

enter image description here

While my output is this one instead: http://prntscr.com/7nlh83

<-- by setting height 50px

enter image description here

<-- by setting height 100px

In a nutshell, the elements are being printed on two (or multiple) rows according to the device (or resolution), while I want them to be all printed inline and able to scroll horizontally regardless the amount of <li>s inside the parent container.

Fiddle to work on:

http://jsfiddle.net/b7ghL587/1/

My questions:

  1. Why is it happening? Is there any way to solve it or am I supposed to don't use lists at all and rewrite the javascript part?
  2. Can the rest of the DOM influence this?
Solution

  • You can't scroll elements that are floated.
    You need to override some Bootstrap default code:

    .nav-tabs > li {
    float:none;
    display:inline-block;
}

    Here is a working fiddle.