-1

I have a navbar with bootstrap 3 and Angular JS. On this navbar I have unordered list with li elements. Below I show part of my navbar:

enter image description here

The code of my navbar is: 

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a ng-click="reloadPage()" class="navbar-brand" href="/"><img style="margin-top: -15px;" width="192"
                                                                  height="49" src="packages/img/logo-trans.jpg"</a>
    <ul class="nav navbar-nav">
        <li class=""><a target="_self" ng-click="openTabs()" style="cursor: pointer;">DRAFT: Opened <span
                class="badge"><% tabService.tabs.length %></span></a></li>
        <li class=""><a target="_self" ng-click="test()" style="cursor: pointer;">LEADS: New <span
                class="badge">0</span></a></li>
        <li class="" ng-show="!htLoading"><a target="_self">AHT: <% htValues.aht | secondsToDateTime %></a></li>
        <li ng-show="htLoading">
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
        <li class="" ng-show="!htLoading"><a target="_self">EHT: <% htValues.eht | secondsToDateTime %> </a>
        </li>
        <li ng-show="htLoading" >
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
        <li class="" ng-show="!htLoading"><a target="_self">ABuffer: <% htValues.buffer | secondsToDateTime
            %></a></li>
        <li ng-show="htLoading">
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
    </ul>
</div>

When data with AHT, EHT and ABuffer are not loaded yet then I show a glyphicons with ng-show="htLoading" angularJS directive. But they look then:

enter image description here

In my opinion it isn't look fine. So I'd like to move these loaders to center of every of list element. How could I do that? Is it possible?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Krzysztof Michalski
  • 791
  • 1
  • 9
  • 25
  • To give them an **even spacing** I think you need [`jumbotron-nav`](https://stackoverflow.com/questions/14601425/bootstrap-navbar-justify-span-menu-items-occupying-full-width) – Aleksey Solovey Apr 25 '18 at 10:39
  • 2
    The problem is not that much to center the loaders, it's more that the `li` elements with loaders adapt their width to the loader image width (25px). Try first to give a `width` or `min-width` to them, then center the loaders if needed. – Kaddath Apr 25 '18 at 10:39

1 Answers1

0

You can do this with flex

ul.nav{
  display: flex;
  justify-content: space-between; /* gives equal space between all li items*/
}

The advantage of using this is you don't have to worry about content length of dynamic data getting loaded.

Arvind Muthuraman
  • 2,957
  • 1
  • 12
  • 11