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

Expand|Select|Wrap|Line Numbers

 
<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

Sep 21 '11 #1

Subscribe Post Reply

5073

drhowarddrfine

7,435

Expert 4TB

'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

hellodipak

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

dragon52

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

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

Sep 21 '11 #4

John Mollman

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

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

Expand|Select|Wrap|Line Numbers

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

Oct 3 '11 #5

dragon52

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

7,435

Expert 4TB

First, never use tables for layout.
Second, how does that work without the form element?

Oct 4 '11 #7

by: Lauren Quantrell | last post by:

In terms of resources, wondering if it makes a difference in adopting one of the three options below for resizing controls on a form and controls on a subform at the same time. option a.) Put...

Microsoft Access / VBA

How to delete form controls in a loop

by: J L | last post by:

I need to loop through a form's controls collection and delete some based on type and location. I have tried For..Each and For i = 0 to form.controls.count - 1 but when I delete any it messes up...

Visual Basic .NET

Binding data to form controls

by: Dries De Rudder | last post by:

Hi, I am trying to bind an object to form controls. I've got an object MyObject which has some properties e.g. ID. I've got a form, Form1, that contains a textbox ,TextBox1, now I want to...

C# / C Sharp

Getting Windows Form controls?

by: Adam Right | last post by:

Hi, I want to get the controls of the windows form. I know that form.Controls give me the list of controls but i have a problem. For example, the toolstripmenu control cannot be reached with...

C# / C Sharp

Winodws Form Controls Listing?

by: Adam Right | last post by:

Hi, I want to get the controls of the windows form. I know that form.Controls give me the list of controls but i have a problem. For example, the toolstripmenu control cannot be reached with...

C# / C Sharp

browser/ecmascript behavior when form controls lack enclosing form tag?

by: jmp | last post by:

(I hope this isn't considered too far off-topic.) I work as a developer on a browser product found on handheld devices, and I'm trying to specify behavior for the browser to make it "as...

Javascript

VB 2005 Form Controls Disappeared!!

by: Ryan | last post by:

Ok.. I have a form with lots of stuff on it; a tool strip panel, menu strip, data binding elements (dataset, binding source, table adapter), tab control with 7 tab pages, each page contains a...

Visual Basic .NET

Accesing form controls from another class than the one tha created them

by: Mike | last post by:

Hi, I have a form with some controls, and a different class that needs to modify some control properties at run time. Hoy can I reference the from so I have access to its controls and...

Visual Basic .NET

Unsafe Names for HTML Form Controls

by: dhtml | last post by:

I have written an article "Unsafe Names for HTML Form Controls". <URL: http://jibbering.com/faq/names/ > I would appreciate any reviews, technical or otherwise. Garrett --...

Javascript

resize Form/controls/fonts dynamically to fit diff screen resoluti

by: =?Utf-8?B?UmljaA==?= | last post by:

A lot of users at my workplace use different screen resolutions, and I build apps to use 1680 x 1050 pixels res by default. But some users are using 800 x 600, and the apps are too large for their...

Visual Basic .NET

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

how to align form controls

Similar topics