CODEWITHSUNDEEP
angularjstwitter-bootstraptwitter-bootstrap-3
Omar
Omar

Reputation: 3040

Can anyone see why the bootstrap tabs are not working inside my modal?

I cannot get tabs to work on the inside of my modal no matter what I do. If it matters the modal is within a ng-repeat with angularJS and the modal id is being called dynamically

    <!--======== Trigger ========-->
    <a data-toggle="modal" href='#{{faIcon.iconSelect}}'>Trigger Modal</a>


    <!--======== modal ========-->
    <div class="modal fade" id="{{faIcon.iconSelect}}">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"><i class="fa fa-fw">{{faIcon.theIcon}}</i>{{faIcon.name}}</h4>
          </div>





          <div class="modal-body">
            <h1><i class="fa fa-fw">{{faIcon.theIcon}}</i></h1>

             <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist" id="myTab">
                <li class="active"><a href="#1" data-toggle="tab">1</a></li>
                <li><a href="#2" data-toggle="tab">2</a></li>
                <li><a href="#3" data-toggle="tab">3</a></li>

              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                <div class="tab-pane active" id="1">1</div>
                <div class="tab-pane" id="2">2</div>
                <div class="tab-pane" id="3">3</div>

              </div>

          </div>






          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>

            <input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">opied: {{copied}}

          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--======== modal ========-->

Am i missing an init code or something

Upvotes: 2

Views: 1043

Answers (1)

Guy Goldenberg
Guy Goldenberg

Reputation: 819

according to my tests it seems that you don't have any problems with the code so the problem is probably on another line of your code.

The easiest but most common things that make this kind of thing happen is that you probably forgat to close some tag..

Upvotes: 1

Related Questions