Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tableless form issue

    How can I make the red span (which holds the input text) strech over the remaining space after the label in this form?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title></title>
    
    </head>
    <style>
    
    	#frm {
    		padding:0;
    		margin:0 auto;
    		width:30em;
    		border:solid;
    		border-width:1px 1px 1px 1px;
    	}
    	#frm form {
    		padding:0;
    		margin:0;
    	}
    	#frm label {
    		padding-right:0.5em;
    		height:2em;
    		width:10em;
    		text-align:right;
    		line-height:2em;
    		float:left;
    		border:solid;
    		border-width:0px 1px 1px 0px
    	}
    	#frm input {
    		float:left;
    		margin-top:0px;
    		font-size:10px;
    	}
    	#frm span {
    		height:2em;
    		float:left;
    		background:red;
    		border:solid;
    		border-width:0px 0px 1px 0px;
    	}
    	#frm #frmBottom {
    		height:20px;
    		background:#9D4AAB;
    	}
    	#frm br {
    		clear:left;
    	}
    	
    </style>
    <body>
    
    <div id="frm">
    	<form>
    		<label for="name">Name:</label>
    		<span><input id="name" name="name"></span><br>
    	
    		<label for="address">Address:</label>
    		<span><input id="address" name="address"></span><br>
    	
    		<label for="city">City:</label>
    		<span><input id="city" name="city"></span><br>
    	</form>
    	<div id="frmBottom"></div>
    </div>
    
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Tableless form issue-form.jpg  

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    Not totally sure what you mean...

    This?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title></title>
    
    </head>
    <style>
    
    	#frm {
    		padding:0;
    		margin:0 auto;
    		width:30em;
    		border:solid;
    		border-width:1px 1px 1px 1px;
    	}
    	#frm form {
    		padding:0;
    		margin:0;
    	}
    	#frm label {
    		padding-right:0.5em;
    		height:2em;
    		width:10em;
    		text-align:right;
    		line-height:2em;
    		float:left;
    		border:solid;
    		border-width:0px 1px 1px 0px
    	}
    	#frm input {
    		float:left;
    		margin-top:0px;
    		font-size:10px;
    		width: 30.5em;
    	}
    	#frm span {
    		height:2em;
    		float:left;
    		background:red;
    		border:solid;
    		border-width:0px 0px 1px 0px;
    	}
    	#frm #frmBottom {
    		height:20px;
    		background:#9D4AAB;
    	}
    	#frm br {
    		clear:left;
    	}
    	
    </style>
    <body>
    
    <div id="frm">
    	<form>
    		<label for="name">Name:</label>
    		<span><input id="name" name="name"></span><br>
    	
    		<label for="address">Address:</label>
    		<span><input id="address" name="address"></span><br>
    	
    		<label for="city">City:</label>
    		<span><input id="city" name="city"></span><br>
    	</form>
    	<div id="frmBottom"></div>
    </div>
    
    </body>
    </html>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I give the main form div some width, width:30em; Inside it I give the label some width, width:10em; Now I somehow want that the span cell, <span><input id="name" name="name"></span>, streches automatically over the remaining space in that row. I tried giving it width:20em but it's not working properly.
    nikkiH, what you have suggested gives the input width I want the span with red background fill the remaining row space while the input has fixed size=20 and label has fixed width..

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Try giving the span "display: block", as it's an inline element which won't respond to any explicit dimension.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Instead of changing a span to display:block you should use a div instead (which is exactly the same as a span with display:block but without the need to change the default).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you !! It worked !


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •