Bootstrap Tabs not working in Design View

Suneel Jhangiani asked on August 19, 2015 16:13

I'm trying to create a layout which makes use of Bootstrap Tabs. I have built a small control that generates the necessary HTML code and allows for WebPartZone's to be place in each tab. This all works fine while in Live view, however, it doesn't work in Design view. I'm wondering if someone can give me some pointers as to how I might be able to get this to work in Design view?

For replication purposes I've been trying to work on the following:

1). Created a new Page (CMS.MenuItem) with the Create a blank page option.
2). Ensure the site has the Bootstrap CSS file linked (my site CSS file pulls this in).
3). Add a single Static HTML web part with the following code:

<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js" type="text/javascript"></script>

<ul class="nav nav-tabs style-1" id="tabs" role="tablist">
    <li class="active"><a data-toggle="tab" href="#red" role="tab">Red</a></li>
    <li><a data-toggle="tab" href="#orange" role="tab">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow" role="tab">Yellow</a></li>
    <li><a data-toggle="tab" href="#green" role="tab">Green</a></li>
    <li><a data-toggle="tab" href="#blue" role="tab">Blue</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

<!-- shouldn't actuallly need this as data-toggle="tab" is specified
<script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
        $('#tabs').tab(); 
    }); 
</script>

With the above you will clearly see that the Tabs work when in Live view, but not in Design view.

I have gone further and used Firefox Inspector which shows that the correct Event is being triggered and the 'li' tags do change their class (ie. adding or removing 'active'). However, the div for the tab-pane does not change.

I'm guessing their is a conflict due to Kentico also using Bootstrap in Design View, I'm just not sure how to work around this.

bootstrap layout layouts

Correct Answer

Suneel Jhangiani answered on August 19, 2015 17:19

I got this working now by adding the javascript code to switch tabs directly to the document and hence being processed prior to any of the other routines.

$('#tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

I have put this in a check to ensure we are not in the LiveSite since I believe the Kentico scripts are loaded in all other ViewMode's.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on August 19, 2015 16:18

You may have to add some code for it to work in edit and design view because Kentico is using their own customized version of Bootstrap and it could be causing interference with it. Also depending on what you are using to add the javascript references (webpart, plain text, etc.), the UI could be disabling it.

0 votesVote for this answer Mark as a Correct answer

Suneel Jhangiani answered on August 19, 2015 16:36

Thanks for a super prompt answer Brenden.

For testing I have added the scripts in using the Static HTML web part and hence can see them when viewing source in the browser / using Firefox Inspector.

I'm just stuck at figuring out where this is breaking down.

0 votesVote for this answer Mark as a Correct answer