Jump to content

text box and input select list size


Recommended Posts

I have text boxes and select input on the form.

I have text box html property width = 200px and select input have CSS style width 200px.

It shows same width at design time, but at run time text box a lot shorter then select list.

Are there any property that I can configure to adjust their width to the same to make form look like nicer?

Your help and information is great appreciated,



Link to comment
Share on other sites

If you are using css, problem will be simple:

textarea {height:100px; width:100px; }

You also can also specify the rows and cols attributes of the textareas to control their size. Rows are the horizontal lines and cols is the number of characters wide you want the texarea to be:

<textarea name="myText" rows="10" cols="80">Enter some text</textarea>
Link to comment
Share on other sites

Thanks for the message and help,

I use text which is single line, not text area.

It seems that text box I can use html attribute width, but select list using width of char, so it can not be perfect align.


here is my code


<input type="text" name="MyText" class="MyClass" id="MyText"
value="#MySP.MyValue#" width="200" /></td>
.MyClass {
height: 10px;
width: 200px;
<select class="MyListClass" name="MyList" id="MyList">
<option value=""> </option>
<cfoutput query="MySP1">
<option value="#MySP1.MyID#"
<cfif (isDefined("form.MyID") AND form.MyID EQ MySP1.MyID)>selected="selected"
.MyListClass {
height: 18px;
width: 200px;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
Link to comment
Share on other sites

That maybe due to the fact that inputs have default padding and margins, and the fact you have define a font-size: smaller than the default font-size (16px) would cause the select drop to be less wider AND taller as shown in image, than the text input itself.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...