CSS html dropdown moving divs down

Question

I am trying to create a html dropdown list which should be on top of other divs when selected, but it moves the below div s down and make them be there after selecting dropdown item. Code I tried is in fiddle here. How can I make dropdown float on below div s on selection?

<div class="outer" >  
       <select id="myselect" style="width:100px;">
           <option>abc</option>
           <option>def</option>
           <option>ghi</option>
           <option>jkl</option>
          <option>abc</option>
           <option>def</option>
           <option>ghi</option>
           <option>jkl</option>

    </select>
</div>
   <div class="inner">Enter Name</div>
   <div class="inner">Enter Class</div>

</div>

 $('#myselect').on('mousedown focus', function () {
                    $('#myselect').attr('size', 11);
                    $('#myselect').css('height', '80px');
                    $('.outer').css('height', '80px');
     $('.outer').css('overflow-y', 'scroll');
                });


   $('#myselect').on('change', function () {
                    $('#myselect').attr('size', '1');
                    $('#myselect').css('height', '20px');                    
                });

Leo · Accepted Answer · 2014-02-04 00:13:49Z

2

If what you want is to keep the dropdown on top of the div try setting the position of the dropdown to absolute

$('.outer').css('position', 'absolute');

JS Fiddler

edited Feb 4, 2014 at 0:13

answered Feb 3, 2014 at 5:54

Leo

14.9k2 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Leo Over a year ago

Sorry, I just realized that you mentioned that in your question. I'll update the answer

Kurkula Over a year ago

Leo, This code is really great. But once I select the dropdown the bottom content is moving up. and controls next to that dropdown are merging with selected dropdown. Could you please fix this so that I can mark your answer.

Leo Over a year ago

It's a bit hard to understand what you want but try this updated fiddler

Kurkula Over a year ago

Please check my jsfiddle.net/RK6EF/34 to get more details. The right controls will be moving to left as position is absolute.

Leo Over a year ago

mate this JS Fiddler is different to the one provider in your question...sorry, I don't think anybody can help if you keep changing your question

jacquard · Accepted Answer · 2014-02-03 05:53:33Z

1

You should reset the height of the .outer as shown below:

            $('.outer').css('height', 'auto');

See http://jsfiddle.net/RK6EF/8/ for fix

answered Feb 3, 2014 at 5:53

jacquard

1,3071 gold badge11 silver badges16 bronze badges

3 Comments

jacquard Over a year ago

By 'make dropdown float on below div s on selection' do you mean to say that you want the select drop down to hide the two divs on expanding?

Kurkula Over a year ago

On selecting dropdown, I am trying to have dropdown on top of below divs.

Kurkula Over a year ago

Could you please add this as answer?

Community · Accepted Answer · 2017-05-23 10:25:56Z

1

You will have to use position:absolute if you want elements to overlap Overlapping elements in CSS

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Feb 3, 2014 at 5:59

clancer

6134 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS html dropdown moving divs down

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related