locked
HTML dropdown elements move on browser resize RRS feed

  • Question

  • User-640323567 posted

    Hi,

     I have two dropdowns side by side for the users to select values. But when browser is resized, the right side dropdown moves down to the left dropdown. Now, when I maximize the browser, they stay the same and won't align side by side.

    I've tried setting the div width to 100% and display as inline but they still move and stay like that when browser is maximized. Can somebody please guide me through this?

    Here is my html:

    <body>
    
    <div style="width: 100%; display: inline;">
    
    <select id="dropdown1">
    
     <option value="0000">12:00 AM</option> 
            <option value="0030">12:30 AM</option> 
             <option value="100">1:00 AM</option> </select>
    
    <select id="dropdown2">
    
     <option value="0000">12:00 AM</option> 
            <option value="0030">12:30 AM</option> 
             <option value="100">1:00 AM</option> </select>
    
    </div>
    
    </body>
    

    Thanks for any help!

    Wednesday, May 9, 2018 6:16 PM

All replies

  • User36583972 posted

    Hi ASPbun,

     I have two dropdowns side by side for the users to select values. But when browser is resized, the right side dropdown moves down to the left dropdown. Now, when I maximize the browser, they stay the same and won't align side by side.

    I've tried setting the div width to 100% and display as inline but they still move and stay like that when browser is maximized. Can somebody please guide me through this?


    I tested your code on my side(IE11, Chrome, Edge). There is no such issue that you describe.

    How to restore your issue? Is there any other environment that we need to pay attention to?


    Best Regards,

    Yong Lu

    Thursday, May 10, 2018 9:24 AM