how to align form controls

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dragon52
    New Member
    • Jun 2009
    • 72
    #1

    how to align form controls

    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

    Code:
    <div>
  <input name="SearchText" type="text" id="tbxSearchText" style="width:50px;font-size:12px;line-height:19px;" />
  <select name="SearchBy" id="ddlSearchBy" style="width:110px;height:19px;font-size:12px;position:relative;bottom:1px;">
  <option value="0">Family Name</option>
  <option value="1">Given Names</option>
  </select>
  <input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" id="btnSearch" class="button" style="height:20px;position:relative;line-height:1.1em;"/>
</div>
    Thanks
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      '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.

        Comment

        • hellodipak
          New Member
          • Jun 2010
          • 26
          #3
          For input text and button you can add height and for select(combobox ) line-height and padding should help to get the same height.

            Comment

            • dragon52
              New Member
              • Jun 2009
              • 72
              #4
              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:25p x" and "height:15p x" which is not logical.

              Thanks guys


              Code:
              <div>
  <input name="SearchText" type="text" id="tbxSearchText" style="width:50px;height:15px;line-height:5px;position: relative; top: 50%;" />
  <select name="SearchBy" id="ddlSearchBy" style="width:110px;line-height:3px;padding:2px;position: relative; top: 50%;">
  <option value="0">Family Name</option>
  <option value="1">Given Names</option>
  </select>
<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%;"/>
</div>

                Comment

                • John Mollman
                  New Member
                  • Jul 2011
                  • 2
                  #5
                  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:
                  Code:
                  <html>
	<head>
		<title>Title</title>
	</head>
	
	<body>
		<div>
			<input type="text" name="SearchText" size="20" />
			<select name="SearchBy">
				<option value="0">Family Name</option>
				<option value="1">Given Names</option>
			</select>
			<input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" />
		</div>
	</body>
</html>

                  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.)

                  Code:
                  <html>
	<head>
		<title>Title</title>
	</head>
	
	<body>
		<table border="0">
			<tr>
				<td><input type="text" name="SearchText" size="20" /></td>
				<td>
					<select name="SearchBy">
						<option value="0">Family Name</option>
						<option value="1">Given Names</option>
					</select>
				</td>
				<td><input type="submit" name="btnSearch" value="Search" onclick="return checkForm();" /></td>
			</tr>
		</table>
	</body>
</html>

                    Comment

                    • dragon52
                      New Member
                      • Jun 2009
                      • 72
                      #6
                      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.

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          First, never use tables for layout.
                          Second, how does that work without the form element?

                            Comment

                            Previous template Next
                            Working...