question

GcobaniMkontwana-0775 avatar image
0 Votes"
GcobaniMkontwana-0775 asked YijingSun-MSFT commented

How to make nested form groups in bootstrap?

Hi team

I want to align dropdownlist next to my modal pop up, currently dropdownlist is below this and does not look good.

// Logic

// Bootstrap code
<div class="container">

     <!-- Trigger the modal with a button -->
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">POC</button>
     <!-- Modal -->
     <div id="myModal" class="modal fade" role="dialog">
         <div class="modal-dialog modal-lg">

             <!-- Modal content-->
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">POC Document</h4>
                 </div>
                 <div class="modal-body">

                     <embed src="~/Content/Time-Line Application_POC.pdf"
                            frameborder="0" width="100%" height="400px">

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

             </div>
         </div>
     </div>
 </div>
    

 <div class="form-inline">
     <button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">POC</button>

     <!-- Modal HTML -->
     <div id="myModal" class="modal fade" tabindex="-1">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">Checklist System</h5>
                     <button type="button" class="close" data-dismiss="modal">×</button>
                 </div>
                 <div class="modal-body">
                     <!-- Basic dropdown -->
                     <a class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</a>

                     <div class="dropdown-menu">
                         <a class="dropdown-item" href="#">Action</a>
                         <a class="dropdown-item" href="#">Another action</a>
                         <a class="dropdown-item" href="#">Something else here</a>
                         <div class="dropdown-divider"></div>
                         <a class="dropdown-item" href="#">Separated link</a>
                     </div>
                 </div>
                 </div>
             </div>
         </div>
     </div>

                 <!--Building up some dropdown list for checklist Application-->
dotnet-aspnet-general
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @GcobaniMkontwana-0775 ,

I want to align dropdownlist next to my modal pop up, currently dropdownlist is below this and does not look good.

I don't understand your description. You have two same id of the modal popup control.So,it will make just only one modal popup success. Which the modal pop up do you want the dropdownlist align to?
I have tested your codes,the items in dropdownlist keep horizontal. Is is your problem?
Could you tell us more details of your requirment?
Best regards,
Yijing Sun



0 Votes 0 ·

0 Answers