?
Solved

Formatting INPUT and SELECT elements

Posted on 2002-05-06
8
Medium Priority
?
202 Views
Last Modified: 2010-04-09
I'm using INPUT and SELECT elements in a TABLE and would like to be able to make them use up the remaining space in a cell, instead of using a predetermined size. How do I do that?

Also, I would like to know how to change the back and foreground colors of those kinds of elements.
0
Comment
Question by:red_2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 900 total points
ID: 6991192
If they all need to be the same put this in the head of the page.


<style>
   input {width:100;height:25;color:blue;background-color:yellow}
   select (width:200;color:red;background-color;green}
</style>

If they need to be handled individually style them inline like this:

<select style="width:200;color:red;background-color;green">


Almost all styling of form elements will be ignored by Netscrap 4.x and there is no workaround

Cd&
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 6991305
to take up the remaining space, use :

<input type="text" style="width:100%">
and
<select style="width:100%">

jpoesen
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6991308
sample code to ensure form elements fill up the space available in the table
======================
<html>
<head>
<title>Sizing Demo</title>
<style>
.data {width:100%;}
td {background:#fafad2;font-size:9pt;font-family:Verdana;}
select, input {font-family:Verdana;font-size:9pt;}
</style>
</head>
<body>
<form name="myform">
<table width="100%" cellpadding="4" cellspacing="1" style="background:#dda0dd;">
<tr>
<td width="50%" align="right">User Name</td>
<td width="50%"><input type="text" name="user" class="data" style="background:#00bfff;"></td>
</tr>
<tr>
<td width="50%" align="right">Country</td>
<td width="50%">
<select class="data" name="country" style="background:#db7093;color:#ffff00;">
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
</select>
</tr>
</table>
</form>
</body>
</html>

Notes
=====
1. Cd& has shown how to set the background and color accordingly.

2. What this code shows is that to ensure that the elements take up all the space, the CSS width property should be set to 100%. Even if you set the width of the table to say 450, the form elements will take up the available space.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 23

Expert Comment

by:b1xml2
ID: 6991310
LOL, jpoesen, u beat me to it LOL!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6991330
Using percentages on form elements inside of cells can cause rendering errors, escpecially for the selects.  That can be minimized by including margin:0 on the inputs and selet styles and setting styling on the td tags to include padding:0.  You cannot rely on cellpadding="0" on the table tag to handle it.

Cd&
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 6992360
sorry b1xml2 :)
0
 
LVL 2

Expert Comment

by:TenTonJim
ID: 6993016
like b1xml2 except you can add the background color and font color to the style sheet as well, keeping everything out of the inline style...
---------------
<style>
.data
{
width:100%;
background-color:gainsboro;
color:navy;
font-family:Verdana;
font-size:10pt;
}
.dataforselect
{
width:100%;
background-color:yellow;
color:blue;
font-family:Verdana;
font-size:10pt;
}
.clicker /*for the button*/
{
width:200px or whatever;
background-color:black;
color:yellow;
font-family:Verdana;
font-size:10pt;
}
td
{
background-color:#fafad2;
font-size:9pt;
font-family:Verdana;
}
</style>
---------------
html

<select name="sometin" class="dataforselect">
<option etc etc etc

<input type="text" name="sometinstringy" class="data">

<input type="submit" value="submit" class="clicker">



JimS.
0
 

Author Comment

by:red_2
ID: 6994767
Thanks for the answers everyone!

Since COBOLDinosaur and jpoesen answered one part each, and before anyone else, (tough luck b1xml2 ;) I've decided to give both of you full credit. COBOLDinosaur gets the points for this question, and I'm making a new one to give 300 points to jpoesen as well.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question