0

when including a drop down list within a modal , the list is not well postitionned

    <head>
       <link rel="stylesheet" type="text/css" href="/GRH/assets/bootstrap/css/bootstrap.css">
       <script src="/GRH/assets/jquery/jquery.js"></script>
       <script src="/GRH/assets/bootstrap/js/bootstrap.js"></script>    
       </head>
       <body>

      <input type="button" id="test">
   <div id="myModal" class="modal hide fade" tabindex="-1"
                            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">
                                    ×
                                </button>
                                <h3 id="title">

                                </h3>
                            </div>
                            <div id="modal-body" class="modal-body">
                            </div>

                            <div class="modal-footer">
                            <div class="dropdown" id="menu6">
                        <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" href="#menu6">
                        Lettre de mise en demeure  <b class="caret"></b>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#" class="generateLettre">générer</a></li>
                          <li><a href="#">ajouter/modifier</a></li>
                        </ul>                
                       </div>

                            <input type="button" class="btn" class="close" data-dismiss="modal" value="fermer">
                            </div>
                            </div>


  </body>
  <script>
  $("#test").click(function(){
  $("#myModal").modal();
  });
  </script>

having that the dropdown list works fine outside the modal the jsfiddlz http://jsfiddle.net/jQUzy/2/

3
  • I don't see any modal code here. The styles you've added to the dropdown menu (position: relative; text-align: right;float:right) are responsible for the current positioning. jsFiddle
    – Sara
    Jan 21, 2013 at 17:30
  • i'll post the entire code
    – fatiDev
    Jan 21, 2013 at 17:40
  • We'd need to see the applied styles.
    – isherwood
    Jan 21, 2013 at 17:46

2 Answers 2

2

If you don't have any conflicting styles in custom CSS, the following should achieve the result you want:

.dropdown-menu {
  right: 0;
  left: auto;
}

left: auto; just prevents the dropdown from expanding to full width, remove it if that's the desired behavior.

jsFiddle

1

Another approach would be to wrap the inputs in Bootstrap's .pull-right to bring the UL along for the ride:

http://jsfiddle.net/EYC86/2

    <div class="modal-footer">
        <div class="pull-right">
            <div id="menu6" class="dropdown">
                <button href="#menu6" data-toggle="dropdown" type="button" class="btn dropdown-toggle">Lettre de mise en demeure <b class="caret"></b> 
                </button>
                <ul class="dropdown-menu">
                    <li><a class="generateLettre" href="#">générer</a>

                    </li>
                    <li><a href="#">ajouter/modifier</a>

                    </li>
                </ul>
            </div>
            <input type="button" value="fermer" data-dismiss="modal" class="btn">
        </div>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.