Bootstrap 3 tabbed content in editor template

dynasoft

Hi

I'm trying to apply the following:

https://getbootstrap.com/2.3.2/components.html#navs
https://editor.datatables.net/manual/templates#Any-HTML!

I'm able to click a tab and the heading shows correctly but the actual content part is still stuck on the 1st tab. Happens if I use the demo the BS site gives:

<div>

   Nav tabs 
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

   Tab panes 
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">-1-</div>
    <div role="tabpanel" class="tab-pane" id="profile">-2-</div>
    <div role="tabpanel" class="tab-pane" id="messages">-3-</div>
    <div role="tabpanel" class="tab-pane" id="settings">-4-</div>
  </div>

</div>

Content is stuck on '-1-'. Thanks.

EDIT: Updated triple ticks to be on new lines.

dynasoft

Correct link: https://getbootstrap.com/docs/3.4/javascript/#tabs

kthorngren

Here is an example with Bootstrap tabs.
https://datatables.net/examples/api/tabs_and_scrolling.html

You can look at the source to see how its setup. If you continue to have difficulties please post a link to your page or a test case replicating the tabs issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

dynasoft

Hi. Thanks but I don't have any issues with tabs and DT. This is for an editor form. Maybe I'm missing sth.

kthorngren

Maybe I'm misunderstanding the problem but I took one of my tab examples and added Editor to all three tabs. It seems to work with the editor form showing for each tab. Is this what you are referring to or is there a different problem. Please take my example and update to replicate your issue,

EDIT: Updated example to fully use Datatables BS3 styiling:
http://live.datatables.net/nirokebu/1/edit

Kevin

dynasoft

Hi, the tabs are on the editor form not a DT like your example is showing. Please see below.

colin

I think we'll need to see that, that's not common. Could you update Kevin's example, please, to demonstrate the issue.

Colin

kthorngren

Sorry was a bit slow in understanding the question. Updated your first post so we can see your code properly.

Doesn't look like you are placing your fieldset within the tabs. I updated the Template example to use tabs:
http://live.datatables.net/qelopoqo/1/edit

Kevin

dynasoft

Hi. Many thanks for the help. Managed to get it to work nicely.

colin

Note that Kevin's link here is now this: http://live.datatables.net/qelopoqo/14/edit