CODEWITHSUNDEEP
htmlcssuser-interfacehtml-tableuser-experience
committedandroider
committedandroider

Reputation: 9261

How to adjust the size of the input component?

Here is the UI prototype I am trying to implement enter image description here

Here is what I currently have : JSFiddle and what my layout looks like currently enter image description here

I am trying to adjust the size of the input component so that it matches the height in the UI/the search icon.

Here is the HTML code for the input component
(I set colspan to 3 so that the input will span from "Contact Us" to the American flag.)

<td colspan="3"><input class="help_header" type="text" /></td>

And the CSS code to style it 

input {
    background-color:white;
    padding: 0px;
    height: 1px;
    vertical-align:bottom;   
}

Does anyone know how to adjust the height of the input component in this case? I tried setting the height attribute to 1px but that didn't do anything. I also tried vertical-aligning it with the bottom of the search icon but that didn't do anything either.

Upvotes: 1

Views: 162

Answers (2)

bnahin
bnahin

Reputation: 816

The padding from .help-header is giving the <input> height some trouble.

Removing the padding from the input did the trick, by modifying the selector to .help_header:not(input)

Fiddle

Upvotes: 1

frst
frst

Reputation: 61

You can use font-size and line-height attrs. Or set overflow: hidden, so you can use height attribute. There is good article on this subject http://www.sitepoint.com/style-web-forms-css/

Upvotes: 0

Related Questions