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:
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
.
Comments
Post a Comment