Bootstrap Tabdrop not working in MVC cshtml

Question

I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.

The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.

Tabdrops Source

Here is my complete code of my cshtml file in which i have used the tabdrop.js...

<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
    if (top.location != location) {
        top.location.href = document.location.href;
    }
    $(function () {
        window.prettyPrint && prettyPrint();
        $('.nav-tabs:first').tabdrop();
        $('.nav-tabs:last').tabdrop({ text: 'More options' });
        $('.nav-pills').tabdrop({ text: 'With pills' });
    });
</script>

<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />

<div>
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Left side column. contains the logo and sidebar -->
        <!-- Right side column. Contains the navbar and content of the page -->
        <aside class="right-side">
            <!-- Main row -->
            <div class="row">
                <!-- Left col -->
                <section class="col-lg-6 connectedSortable">
                    <!-- Box (with bar chart) -->
                    <div id="loading-example">
                        <div class="box-body no-padding">
                            <div class="row">
                                <div class="col-sm-7">
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <section class="content">
                <ul class="nav nav-tabs tabs-example" role="tablist">
                    <li class="active"><a href="#tabs-tab1" role="tab" data-toggle="tab">Tab 1</a></li>
                    <li><a href="#tabs-tab2" role="tab" data-toggle="tab">Tab 2</a></li>
                    <li><a href="#tabs-tab3" role="tab" data-toggle="tab">Tab 3</a></li>
                    <li><a href="#tabs-tab4" role="tab" data-toggle="tab">Tab 4</a></li>
                    <li><a href="#tabs-tab5" role="tab" data-toggle="tab">Tab 5</a></li>
                    <li><a href="#tabs-tab6" role="tab" data-toggle="tab">Tab 6</a></li>
                    <li><a href="#tabs-tab7" role="tab" data-toggle="tab">Tab 7</a></li>
                    <li><a href="#tabs-tab8" role="tab" data-toggle="tab">Tab 8</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tabs-tab1">
                        <p>This is tab 1!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab2">
                        <p>This is tab 2!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab3">
                        <p>This is tab 3!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab4">
                        <p>This is tab 4!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab5">
                        <p>This is tab 5!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab6">
                        <p>This is tab 6!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab7">
                        <p>This is tab 7!</p>
                        
                    </div>
                    <div class="tab-pane" id="tabs-tab8">
                        <p>This is tab 8!</p>
                        
                    </div>
                </div>
               
                <!-- top row -->
                <!-- /.row -->
            </section><!-- /.content -->
        </aside>
    </div>
</div>

I have the css files stored in the location

Content\css

and Javascript Files stored in the location

Content\js

The cshtml file has the bootstrap theme of ADMINLTE bootstrap.

Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?

Answer 1

I had same issue. The tabdrop plugin initialized when window re-size.

I solved it by resizing the window after init tabdrop.

$(window).resize();