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?

Make sure that the bootstrap javascript file is referenced correctly on your razor page. — Chris, Dec 20 '14 at 15:51
Hi Chris, The javscript file is correctly referenced only. When i run the same code in html it works.. — Karthik Venkatraman, Dec 21 '14 at 08:22

score 1 · Answer 1 · edited Dec 14 '15 at 11:01

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();

edited Dec 14 '15 at 11:01

Dalija Prasnikar

27,212
44
82
159

answered Dec 14 '15 at 10:09

Tiemin Li

21
4

If you have a question, please use the "Ask Question" button at the top of the page. Please do not post it as an answer. – Mike M. Dec 14 '15 at 10:13
Hi @MikeM. I hope TieminLin has posted an answer that will solve my issue. – Karthik Venkatraman Dec 14 '15 at 10:32
@KarthikVenkatraman OK, I hope it works for you, but TieminLin's initial post was phrased as a question, and did not include any suggestion for a fix. That's what I commented on. – Mike M. Dec 14 '15 at 10:37
Well No issues.. Just saying it.. regarding the solution, i didnt try it out as we have removed the tabdrops totally :( – Karthik Venkatraman Dec 14 '15 at 11:10

Bootstrap Tabdrop not working in MVC cshtml

1 Answers1