CODEWITHSUNDEEP
htmlcss
Micah Armantrout
Micah Armantrout

Reputation: 6981

HTML drop down not dropping down .. Why

First I am using Chrome ... If you look at this First jsfiddle the drop down will not drop down.

<div id="column1" style="float: left; width: 400px;">

If I change the width from 400 to 900 then it will work fine see this Second jsfiddle.

<div id="column1" style="float: left; width: 900px;">

I don't understand why CSS and HTML does this to me. So I am looking for a explanation of why.

Upvotes: 1

Views: 178

Answers (4)

blurfus
blurfus

Reputation: 14031

As others have answered, you have this CSS rule on .topColorTile

column-count: 3;
column-gap: 10px;

but also have this rule on div.topColorCard

 width: 375px;

When the parent container is only 400px the div gets broken down into 3 columns. Since there are no other divs (or elements) inside, the card containing the select uses the entire width (375px as specified in the CSS) with the remaining two columns added next to them but with no content (i.e. invisible)

This makes the select statement to fully show but the overlapping (and invisible) 'columns' prevent the click event to trigger the dropdown action.

Changing the number of columns to 1 would solve the issue (or removing the CSS rule, in this case would be the same)

Setting the width of .topColorCard to a smaller amount (that would fit the parent's 400px) would also do it (i.e. 130px x 3 < 400px)

Making the parent's width to a higher number (like 900px) would also prevent this overlapping.

Upvotes: 1

Tri
Tri

Reputation: 161

You have this css rule in class .topColorTile

column-count: 3;
column-gap: 10px;

If you set width of #column1 by 400px, class .topColorTile will be inherited. And you also set width of .topColorTile div.topColorCard by 375px, it's wrong here, you can not set with of child node larger than width of parent/column-count.

Sorry for my bad english :D

Upvotes: 1

Dekel
Dekel

Reputation: 62576

The column-count you use makes the content of the div to be divided into 3 columns, and that division cause the "extra" content to be "displayed" outside your container (which is only 375px wide).

The reason for the 900px (of the container) to fix this is that it gives enough space for the <select> element to render (btw - 800px is enough).

Upvotes: 1

Piotr O
Piotr O

Reputation: 429

<div style="display:inline; float:right;">

That's why... float:right

Change it to float:left or adjust width of div's

You have a big mess in your code. Check FreeCodeCamp online tutorial to improve your skills.

Upvotes: -1

Related Questions