javascript - angular-ui-tab-scroll: Weird spacing beetwen block to tabs included separetely -


first of all, great library!

now, facing weird problem when wrapping tabset tabs included separately, ie either via single tab elements added manually in dom, either via group of tab added use of ng-repeat:

image

see plunker:

      <scrollable-tabset show-tooltips="false">         <tabset>           <!-- 1st block of tabs-->           <tab>               <tab-heading>tab 0</tab-heading>               tab 0 content           </tab>            <!-- 2nd block of tabs-->           <tab ng-repeat="tab in tabs1" active="tab.active" disabled="tab.disabled">             <tab-heading>{{tab.heading}}</tab-heading>             {{tab.content}}           </tab>           <!-- 3rd block of tabs-->           <tab ng-repeat="tab in tabs2" active="tab.active" disabled="tab.disabled">             <tab-heading>{{tab.heading}}</tab-heading>             {{tab.content}}           </tab>            <!-- 4th block of tabs-->           <tab>               <tab-heading>tab 6</tab-heading>               tab 0 content           </tab>         </tabset>       </scrollable-tabset> 

i inspected/compared css of each block, there no difference...

any idea?

thanks

it's because using inline-block. series of inline-block elements formatted format html have spaces in between them.

to solve should use float, or reformat html not have spaces between elements. recommend use float.

fighting space between inline block elements


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -