[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Formatting INPUT and SELECT elements

Posted on 2002-05-06
8
Medium Priority
?
203 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

649 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