CODEWITHSUNDEEP
cssdrop-down-menupaddinghtml
Linga
Linga

Reputation: 10553

HTML drop down doesn't work

This is part of my code. I'm trying to work with drop down. I'm unable to select the drop down items. If I removed the line style="padding: 80px;" at the last <span> element, it works well. But I need that line for alignment. This is Fiddle

<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select> 
<span style="line-height:20px"> City </span>
<span style="padding: 80px;"> State/Province </span>

Can you please tell what is the problem in this code. Why padding: 80px; causes the problem?

Upvotes: 0

Views: 2858

Answers (6)

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

instead of padding:80px try giving padding-left:80px. Because the padding of the element overlapping the <Select>

http://jsfiddle.net/3xBPL/9/

Upvotes: 1

Mohammad Hossein Amri
Mohammad Hossein Amri

Reputation: 1985

your code has overlap with your drop down

i put it in fiddle

also i give it a color to make it more visible , try to add some new <br> to see how it goes around 

span{

    background-color:red;
}

Upvotes: 0

JaidynReiman
JaidynReiman

Reputation: 984

The padding:80px is definitely the problem.

Here's a screencap of Firebug: http://screencast.com/t/ISPMaYkyK1

Here's a JSFiddle of the solution: http://jsfiddle.net/jrconway3/4gVUn/

In the screenshot, you can see that the padding is causing your span to cover up the two input boxes. The span is an inline element, so some padding will work depending on the circumstances, but it still tries to line up with the other items. The vertical padding does not work because technically, all your current items are on the same line.

padding-left: 80px;

You can specify "padding-left" to ONLY set left padding. This will fix it so you can properly click on the items. Changing the z-index on different elements will set certain elements to have priority over others, making them appear "over" other elements. But that doesn't solve the root of the problem.

Others have already answered the question, but I already started writing so I decided I'd finish it anyway.

Upvotes: 1

Chinmay235
Chinmay235

Reputation: 3414

I think problem is in your span cause span start from the top. It overlapping the drowdown box.

Please checck JSFIDDLE

I am editing this code - 

<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
  <option value="0" selected>Please Select</option>
  <option value="tamilnadu">Tamilnadu</option>
  <option value="kerala">Kerala</option>
  <option value="karnataka">Karnataka</option>
</select> 
<br>
<span style="line-height:20px"> City </span>
 <!--<span style="padding:80px; border:1px #cccccc solid;"> State/Province </span> -->
<span style="padding:0px 80px 80px 80px;"> State/Province </span>

Please use - 

padding:0px 80px 80px 80px;

Upvotes: 1

Roy M J
Roy M J

Reputation: 6938

You need to toggle with z-index.

See : http://jsfiddle.net/3xBPL/7/

<select style="z-index:999; position:absolute">
  <option value="0" selected>Please Select</option>
  <option value="tamilnadu">Tamilnadu</option>
  <option value="kerala">Kerala</option>
  <option value="karnataka">Karnataka</option>
</select> 

<span style="padding:80px; z-index:1;"> State/Province </span>

Reason : The span area is overlapping the select box

enter image description here

Upvotes: 2

b11r
b11r

Reputation: 27

its because, with padding 80px, you will expand the span, and when you click dropdown, website say "the one that clicked is span, not dropdown, so dropdown wont viewed"

you can add border by doing this.. it will explain to you more clearly

<span style="padding:80px;border:1px solid black"> State/Province </span>

what do you expect with that span using padding:80px by the way?

Upvotes: -1

Related Questions