By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,503 Members | 1,143 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,503 IT Pros & Developers. It's quick & easy.

how to align form controls

P: 72
Hi,

Can anyone tell me how to use css to line up different types of form controls? Different types seem to behave differently.

I have a textbox, dropdownbox and a button along 1 line across the page. I want to make all of them the same height and vertically align them. Here is my code

Expand|Select|Wrap|Line Numbers
  1. <div>
  2.   <input name="SearchText" type="text" id="tbxSearchText" style="width:50px;font-size:12px;line-height:19px;" />
  3.   <select name="SearchBy" id="ddlSearchBy" style="width:110px;height:19px;font-size:12px;position:relative;bottom:1px;">
  4.   <option value="0">Family Name</option>
  5.   <option value="1">Given Names</option>
  6.   </select>
  7.   <input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" id="btnSearch" class="button" style="height:20px;position:relative;line-height:1.1em;"/>
  8. </div>
  9.  
Thanks
Sep 21 '11 #1
Share this Question
Share on Google+
6 Replies


drhowarddrfine
Expert 5K+
P: 7,435
'vertical-align' should be working for you. 'height' should work on the text box but won't affect the other input elements since they're part of the browser.
Sep 21 '11 #2

P: 26
For input text and button you can add height and for select(combobox) line-height and padding should help to get the same height.
Sep 21 '11 #3

P: 72
It is not perfect but it looks good enough but the code looks really messy.

To make the textbox and button the same I have to use "height:25px" and "height:15px" which is not logical.

Thanks guys


Expand|Select|Wrap|Line Numbers
  1. <div>
  2.   <input name="SearchText" type="text" id="tbxSearchText" style="width:50px;height:15px;line-height:5px;position: relative; top: 50%;" />
  3.   <select name="SearchBy" id="ddlSearchBy" style="width:110px;line-height:3px;padding:2px;position: relative; top: 50%;">
  4.   <option value="0">Family Name</option>
  5.   <option value="1">Given Names</option>
  6.   </select>
  7. <input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" id="btnSearch" class="button" style="height:25px;padding-top:3px;padding-bottom:3px;line-height:6px;position: relative; top: 50%;"/>
  8. </div>
  9.  
Sep 21 '11 #4

P: 2
Hi,

I know this is one week later, but I'll try to help you out here. It seems you already found a solution, but as you said it looks messy. Maybe I can give it a try. I think you're trying to have a clean row of controls, correct?

Try this:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Title</title>
  4.     </head>
  5.  
  6.     <body>
  7.         <div>
  8.             <input type="text" name="SearchText" size="20" />
  9.             <select name="SearchBy">
  10.                 <option value="0">Family Name</option>
  11.                 <option value="1">Given Names</option>
  12.             </select>
  13.             <input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" />
  14.         </div>
  15.     </body>
  16. </html>
  17.  

You could even have them within a table. This is what I normally do when placing form controls on a page. (Although it basically has the same output, it comes in handy when you have a lot of stuff going on, such as text boxes, drop-downs, buttons, etc.)

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>Title</title>
  4.     </head>
  5.  
  6.     <body>
  7.         <table border="0">
  8.             <tr>
  9.                 <td><input type="text" name="SearchText" size="20" /></td>
  10.                 <td>
  11.                     <select name="SearchBy">
  12.                         <option value="0">Family Name</option>
  13.                         <option value="1">Given Names</option>
  14.                     </select>
  15.                 </td>
  16.                 <td><input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" /></td>
  17.             </tr>
  18.         </table>
  19.     </body>
  20. </html>
  21.  
Oct 3 '11 #5

P: 72
John,

Thanks for your reply.

I have moved on to another part of my project now. I am glad to have received your suggestions though because I will come back to it later. Happy to have a better alternative to my messy code.
Oct 4 '11 #6

drhowarddrfine
Expert 5K+
P: 7,435
First, never use tables for layout.
Second, how does that work without the form element?
Oct 4 '11 #7

Post your reply

Sign in to post your reply or Sign up for a free account.