How to invoke tabdrop in Bootstrap modals?

[MSCAU]

Just downloaded this and it's a nice improvement over the original tabdrop, thanks.

Do you have any advice for applying bootstrap-tabdrop inside modals? I assume I need to call tabdrop('layout') but that just collapses all tabs into the drop-down menu when I tie it to a (test) button inside the modal. I thought it was supposed to recalculate the available width and display the tabs accordingly.

Hi,

I don't have any advice at this point for applying bootstrap-tabdrop inside modals. If you do figure it out, please feel free to post here or push any changes you make.

jschab

[rkenney]

I know this is old but i figured id add this just in case anyone ever reads this.
If you are using bootstrap 3 this is what i had to do for modals:
Example html, see comments for what i had to add.

<!-- Modal give this modal an id to track its  shown event -->
<div class="modal fade" id="ExampleTabModal" tabindex="-1" role="dialog" aria-labelledby="ExampleTabModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="ExampleTabModalLabel">Modal With TabDrop</h4>
            </div>
            <div class="modal-body">

                <div class="tab-container tabs-theme">
                    <!--wrap the nav in a row and col to force a width so the tabs don't all show in the dropdown on show-->
                    <div class="row">
                        <div class="col-xs-12">
                            <!-- Nav tabs:  give this nav an # id to use when calling layout -->
                            <ul class="nav nav-tabs tabs-bordered" id="modalTabs" role="tablist" >
                                <li role="presentation" class="active tab-red"><a href="#tabOne" aria-controls="tabOne" role="tab" data-toggle="tab">tabOne</a></li>
                                   ... more links 
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="tabOne">tabOne...</div>
                                ... more tab panes
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Javascript:

(function ($) {
        //target  id of the nav tabs in modal and activate tabdrop,
        $("#modalTabs").tabdrop();

        //now we watch for the shown event of the modal with tabs in it.
        $("#ExampleTabModal").on("shown.bs.modal", function (e) {
            //on shown we target id of the nav tabs in modal and call layout on modal show.
            $("#modalTabs").tabdrop("layout");
        })
    })(jQuery);

Here is a screen shot of the example with ten tabs:

A similar approach works for nested tabs also.
Hopes this helps.