CODEWITHSUNDEEP
angular-uiangular-ui-bootstrap
Andy
Andy

Reputation: 2749

Angular Bootstrap Tabs Causing Strange Wrapping

I'm using Angular Bootstrap UI tabset directive and having some trouble with strange CSS. Here's my HTML, and also a plunker. Why is the div#content wrapping? How to I make it appear directly below the tabs where it belongs?

<div id="left">
  floating left div with static height and width
</div>

<div id="right">
  <div>standard div with width=100%.  presence of tabs is screwing up content below them</div>
  <tabset>
    <tab>
      <tab-heading>Tab 1</tab-heading>
    </tab>
    <tab>
      <tab-heading>Tab 2</tab-heading>
    </tab>
  </tabset>
  <div id="content">
    Why is this wrapping below???
  </div>
</div>

EDIT: It looks like the CSS class "nav" has a rule ".nav:after { clear:both; }" which is clearing the left float and causing the problem. But I don't know how to fix this still.

Upvotes: 0

Views: 426

Answers (1)

Rob J
Rob J

Reputation: 6629

Putting a style of display: inline-block on the tabset element seems to fix the problem.

Upvotes: 0

Related Questions