Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I'm trying to use jQuery UI Tabs but it seems to conflict with SP2010 styles, do you know any alternative that Works with SP2010? Or maybe a way to fix this?

Screenshot

The same issue occurs with Bootstrap Twitter. Here is a code sample:

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>
share|improve this question
    
Could you explain the issue you are having further? I have one customized page in a site collection that uses jQuery tabs without any issues. –  Robert Kaucher Jul 15 '13 at 13:15
    
We're on 2010 and use jQuery UI Tabs with no issues. Post code or screenshots of the issue. You can customize the CSS if you want, the default is not going to match your or SPs styles. –  PirateEric Jul 15 '13 at 15:02
    
Just added a screenshot. –  Juliano Nunes Silva Oliveira Jul 16 '13 at 13:48
    
A workaround I've found is to remove the css class "ui-helper-clearfix" and add a margin-top to the #tabs .ui-tabs-panel selector. –  Juliano Nunes Silva Oliveira Jul 16 '13 at 17:28
    
yeah i also use jquery ui tabs with no issue. i would take a second look at where the mark up is placed and styles surrounding. you shouldn't need to remove the helper class to get that to work. –  Justin Jul 27 '13 at 4:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.