2016-03-25 16 views
0

Ich habe ein modale und in den Modalverben Körper erstellt Ich mag eine Dropdown-Button hinzuzufügen.BootStrap Drop-Down in der falschen Position

Aber aus irgendeinem Grunde der Tropfen ist unten in dem vollständigen falschen Ort und ich habe versucht, über sie in der CSS zu schreiben, aber ohne Erfolg

Ich habe versucht, diese ersten

<div class="modal-content"> 
      <div class="modal-header"> 
       <span class="close">×</span> 
       <h2 align="left"><img src="/pic"width="50px" height="50px" />Share</h2> 
      </div> 
      <div class="modal-body"> 
      <input type="textarea" align="left" id = "shareSearchBar" placeholder ="" name = "search"> 

       <div class="dropdown"> 
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
         <img src="pic2"width="20px" height="20px" />Edit 
         <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu " aria-labelledby="dropdownMenu1"> 
         <li><a href="#" data-value="action"><img src="/pic"width="20px" height="20px" />E</a></li> 
         <li><a href="#" data-value="another action"><img src="/pic"width="20px" height="20px" />V</a></li> 
        </ul> 
       </div> 

Mit meinem css versuchen um den Knopf in die richtige Position zu bringen, was er tut.

#dropdownMenu1{ 

    position: absolute; 
    top: 35%; 
    right: 3% 

} 
.dropdown{ 

position: absolute; 
top: 35%; 
right: 0% 

} 

Dann habe ich versucht, den follwoing, die sehr ähnlich ist, aber ein bisschen anders

<div class="modal-body"> 

       <button type="button" id = "dropdownMenu1" class="btn btn-small btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
       <img src="/pic"width="20px" height="20px" />Edit 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
        <li><a href="#" data-value="action"><img src="/pic"width="20px" height="20px" />e</a></li> 
        <li><a href="#" data-value="another action"><img src="/pic"width="20px" height="20px" />v</a></li> 
       </ul> 
      </div> 

      </div> 

Samt css ...

ich wirklich nicht sowieso darüber sehen.

enter image description here

+0

Sie müssen Geige für diese so können wir replizieren –

+1

Was genau meinst du mit dem Dropdown ist in der falschen Position. Sieht es wie das Bild aus, das du gepostet hast? Versuchen Sie, die Dropdown-Schaltfläche auf der Seite der Eingabe zu haben, und das Dropdown-Menü wird an der falschen Stelle angezeigt? Oder gibt es noch etwas, was du versuchst zu tun? Können Sie bitte ein wenig klären, damit wir Ihnen helfen können. Hier ist eine Geige, die ich gemacht habe, ist das was du suchst? https://jsfiddle.net/wamosjk/hcgd9u43/ –

+0

@DrinkinPeople Ich versuche, genau das zu tun, was Sie dort getan haben. Ja, es sieht aus wie das Bild, das ich gepostet habe. Siehe Ich habe meine eigene benutzerdefinierte modale Ansicht erstellt, ohne den Bootstrap zu verwenden. Ich habe das Gefühl, dass was los ist, aber es soll nicht –

Antwort

0

Können Sie Ihre Drop-Down auf Show-Event des Modells reinitiliaze. Etwas wie dieses:

$('#mymodal').on('shown', function() { 
     $("#mydropdown").dropdown(); 
    }); 

Und entfernen Sie Ihr kundenspezifisches css.

Ereignis und initiliaze Syntax kann je nach Version von Bootstrap ändern.

+0

Hinweis posten, die 3 erfordert '.on Bootstrap (‚shown.bs.modal‘, function() {' –

+0

@osmanraifgunes habe ich versucht, das aber ohne Erfolg –

+0

vielleicht andere CSS ist betroffen. Sie alle anderen CSS und rein Bootstrap CSS und Stil zu entfernen, dann von oben debuggen langsam nach unten –

0

@hat_to_the_back: hier ist die Geige aktualisiert, die @Drinking Menschen gemacht .. passt, was Sie tun möchten:

https://jsfiddle.net/Jyde/hcgd9u43/2/

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 


<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 
<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body"> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div class="input-group"> 
      <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="/pic"width="20px" height="20px" />Edit <span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
       <li><a href="#" data-value="action"><img src="/pic"width="20px" height="20px" />e</a></li> 
       <li><a href="#" data-value="another action"><img src="/pic"width="20px" height="20px" />v</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
      </div><!-- /btn-group --> 
      <input type="text" class="form-control" aria-label="..."> 
     </div><!-- /input-group --> 
     </div><!-- /.col-lg-6 --> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div>