CODEWITHSUNDEEP
jqueryhtmlcssjquery-uisemantic-ui
Alonso C.
Alonso C.

Reputation: 21

Semantic UI tab not styling

I am following the usage guidelines exactly as explained on the Semantic UI page http://www.semantic-ui.com/modules/tab.html#/usage and placed the tab.min.css file into my CSS folder, and correctly linked it. When I run the page however, it looks nothing like the Semantic UI ones. Instead, it looks vertical and plain text like this:

Tab 1
Tab 2
Tab 3

This is the code I have now on my page where the tabs are needed. 

<script>$('.tabular.menu .item').tab();
</script>

<div class="ui tabular menu" >
  <div class="item active" data-tab="ts-tab1">Tab 1</div>
  <div class="item" data-tab="ts-tab2">Tab 2</div>
  <div class="item" data-tab="ts-tab3">Tab 3</div>
  <div class="item" data-tab="ts-tab4">Tab 4</div>
  <div class="item" data-tab="ts-tab5">Tab 5</div>
  <div class="item" data-tab="ts-tab6">Tab 6</div>
</div>

<div class="ui tab active" data-tab="ts-tab1">
 example content
</div>

<div class="ui tab" data-tab="ts-tab2">
  example content

</div>
<div class="ui tab" data-tab="ts-tab3">
 example content

</div>
<div class="ui tab" data-tab="ts-tab4">
 example content

</div>
<div class="ui tab" data-tab="ts-tab5">
 example content

</div>
<div class="ui tab" data-tab="ts-tab6">
 example content

</div>

What am I missing? I am so frustrated as I've been trying to mess with it for a day now..thanks in advance!

Upvotes: 1

Views: 1171

Answers (1)

jacques-dup
jacques-dup

Reputation: 11

I stumbled on this while researching the same issue while implementing the Tab in React. The problem for me was that the tab.min.css file didn't include the menu related styles, which are used for the tabular menu. Adding the related menu classes to the css resolved the issue.

Upvotes: 1

Related Questions