Input text box and width 100% - html

I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.

http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>

<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/

you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}

Related

Placing a png image in a table

Hi I know this is a simple question. But I am unable to do it. I want to place images in a table. Everything is working fine in a new html file. But when I am trying to insert the table in my project file, the images are getting overlapped.They are not fitting in a table. What mistake am I doing? Kindly look at the image that is attached.
table,td,th {border: 3px solid black;padding: 15px}
<table>
<tr><th>Choose from the icons</th></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png' width='20%'/></td></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png'width=20%/></td></tr>
</table>
Try:
table,
td,
th {
border: 3px solid black;
padding: 15px
}
img.icon {
width: 20%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>
this may works. if you have any query, you can comment and ask further.
this solution fix your image inside <td>
table,
td,
th {
border: 3px solid black;
padding: 15px
}
td img {
max-width: 100%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>
First you should always specify both height and width.
Second you should specify the width in pixels. AFAIK, the image tag does not support percentages.
IMG tag
Third, your second image does not have quotes around the width value.
Ideally you should resize the image to work without a width and height defined.
The best way might be to set the image as the background image of the cell.

Two container next to each other at full width (each container can be hidden)

I searched a lot, but now want to ask because I found no answer:
If have two div elements that should be located next to each other with full width (each exactly 50% of the full width). It could be that the first or the second div is hidden (style="display=none"). In this case the other div should be displayed in full width.
My solution is this:
<table style="width: 100%;">
<tr>
<td style="padding: 0px;">
<div id="div1">
...
</div>
</td>
<td style="padding: 0px;">
<div id="div2">
...
</div>
</td>
</tr>
</table>
That works almost perfect, BUT when both divs are displayed the first one seems to be 55% and the second one 45% of the width.
If course I can set the width of the div when hiding the other to 100%, but I want to avoid doing that.
Does anyone have a solution to make them both 50% when both are displayed.
A JQuery approach with no tables
You can achieve this with JQuery (or plain javascript) which I am assuming you are using to show/hide the elements anyway.
$("#ButtonOne").click(function () {
$(".one").toggle();
if($(".one").is(":visible")){
$(".two").css("width", "50%");
}
else{
$(".two").css("width", "100%");
}
});
$("#ButtonTwo").click(function () {
$(".two").toggle();
if($(".two").is(":visible")){
$(".one").css("width", "50%");
}
else{
$(".one").css("width", "100%");
}
});
The above JQuery assumes two buttons for toggling the visibility of the elements.
Here is an example
With the example, it should be noted that using 50% width with inline-block requires zero whitespace in between the elements. Hence the </div><div... requirement.
You will need some vertical-align:top; aswell to ensure the DIV elements stay in line.
Incase the link ever breaks, here is the accompanying HTML...
<div class="main">
<div class="one">this is one</div><div class="two">this is two</div>
</div>
<input type="button" id="ButtonOne" value="Toggle one" />
<input type="button" id="ButtonTwo" value="Toggle two" />
...and CSS...
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
.one {
background-color:red;
height:100px;
width:50%;
display:inline-block;
}
.two {
background-color:blue;
height:100px;
width:50%;
display:inline-block;
}
Can you place both divs in the same table cell?
<table style="width: 100%;">
<tr>
<td>
<div id="div1">
...
</div>
<div id="div2">
...
</div>
</td>
</tr>
</table>
You could simply toggle a class....
table { width: 100%; padding:0; }
td { padding:0; margin:0; }
td > div { width: 50%; display: block; float: left; height: 50px; cursor: pointer; }
#div1 {background: #a00;}
#div2 {background: #00a;}
.wide {width: 100%;}
.hide { display: none;}
and the jquery...
$('div').click(function () {
$(this).toggleClass('wide');
$('div').not(this).toggleClass('hide');
});
DEMO HERE
Would work for multiple divs easily: demo 2
Use table-layout:fixed:
EDIT:
You have to set the display:none on the td, not on the div.
<table style="width: 100%; table-layout:fixed">
<tbody>
<tr>
<td style="padding: 0px; width:50%">
<div id="div1" style="border: 1px solid black">
This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text
</div>
</td>
<td style="padding: 0px; width:50%; display: none;">
<div id="div2" style="border: 1px solid black">
This isn't as long as the other text.
</div>
</td>
</tr>
</tbody>
</table>
I've tested it on Chrome, Firefox and IE10
ok guys,
thanks for your help. now i found what i was searching for:
<table style="width: 100%;">
<tr>
<td id="td1" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
<td id="td2" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
</tr>
</table>
both td tags are next to each other and both take exactly 50%. when hiding td1 or td2, the other td goes into full width automatically.
best regards...
You can achieve this by setting width in the td itself, and when you want to hide any one div just add "display:none;" in the specified td instead of the div, then the remaining div will have 100% width.
<table style="width: 100%;">
<tr>
<td style="padding: 0px; width:50%;">
<div id="div1" >
hii
</div>
</td>
<td style="padding: 0px;width:50%;">
<div id="div2" style="">
byyee
</div>
</td>
</tr>
</table>

Arbitrary Column Sizes And Missing Borders In IE6

I have created nested tables with the following markup, where the first table contains an example of a typical row:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c0" />
</td>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
#rightColumn table, #leftColumn table {
width: 100%;
}
.cell {
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
}
.image {
padding: 0;
margin: 0;
width: 75px;
}
In Firefox this renders like this:
but in IE6 it renders like this:
Two things are going wrong in IE:
The right hand border is missing from every table.
The 2nd and 3rd tables in the right hand column have arbitrary sizes for the last column despite the fact that these cells are class "image" and should have a fixed width of 75px.
Any advice is greatly appreciated.
EDIT: #rightColumn table, #leftColumn table { width: 100%; background: Red }
Check whether IE is rendering your page is in quirks mode or not. Quirks mode often affects element widths in particular, so I would suggest that this is a very strong candidate for the cause of your problem.
You should make sure the page is in standards mode in order to render correctly.
This is easily done by making sure the page has a valid doctype at the top of the page.
If you don't have a doctype, you can add any valid doctype to get it working in standards mode, but if you're not sure which one to use, just use the following:
<!DOCTYPE html>
Hope that helps.

Set CSS cell-spacing for TD

So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.
I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.
Is there any way to do this?
Here is a quick rough sketch with MS Paint, I hope this explains what I need:
In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!
.
And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.
<table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
<tr>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr><tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td><td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr></table>
Any help is really appreciated.
See fiddle for code and demo
fiddle: http://jsfiddle.net/kDKEw/2/
demo: http://jsfiddle.net/kDKEw/2/embedded/result/
HTML:
<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
<tbody><tr>
<td valign="middle" colspan="2" class="row4 uname">
<div class="name">
Guest
</div>
</td>
</tr><tr style="height: 36px;">
<td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
<div class="postcolor">
Post content
</div>
</td><td valign="top" class="lefty" style="float: right; width: 6%;">
<div class="postdetails">
Details
</div>
</td>
</tr>
</tbody>
</table>
SS:
Updated Fiddle as per image illustration ( http://i.imgur.com/o56CD.png ): given by deathlock
Fiddle: http://jsfiddle.net/7xfxF/1/
Demo: http://jsfiddle.net/7xfxF/1/embedded/result/
SS:
In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:
EDIT
I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.
If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.
<style type="text/css">
table.postable {
border-collapse: separate !important;
border-spacing: 1px;
}
table.postable td {
border:1px solid black;
padding: 5px;
}
td.ritey {
border: 0px !important;
padding: 10px 5px 10px 5px !important;
}
td.lefty {
padding: 10px 5px 10px 5px !important;
}
div.postcolor {
margin: 3px;
padding: 10px;
border: 1px solid black;
}
</style>
<table width='100%' class='postable'>
<tr>
<td colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr>
<tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td>
<td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr>
</table>
OUTPUT:
See this jsFiddle for a demonstration.

HTML CSS resize problems - button and checkbox goes one line down

I have a problem with my html button and checkbox. Whenever I resize page especially making it very small my button and checkbox goes at the bottom. You can check it by running my code. I want the button and checkbox to stay on the same line with the textbox. Please help. Thanks in advance.
compresstest.html
<html>
<head>
<style type="text/css">
table#tblTest {
width: 100%;
margin-top: 10px;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table#tblTest th {
white-space: nowrap;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table#tblTest td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div style="width: 100%;">
<input type="text" id="searchCompanyText" name="searchCompanyText" />
<input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" /> Active
</div>
<table id="tblTest" style="width: 100%">
<tr>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>Tom</td>
<td>UK </td>
</tr>
<tr>
<td>Hans</td>
<td>Germany</td>
</tr>
<tr>
<td>Henrik</td>
<td>Denmark</td>
</tr>
<tr>
<td>Lionel</td>
<td>Italy</td>
</tr>
<tr>
<td>Ricardo</td>
<td>Brazil</td>
</tr>
<tr>
<td>Cristiano</td>
<td>Portugal</td>
</tr>
</table>
</body>
</html>
You can also use white-space: nowrap; on your div.
https://developer.mozilla.org/en/CSS/white-space
I have just added min-width style to the div. Have a look at
http://jsfiddle.net/tariqulazam/wmEYD/
<div style="width: 300px;" >
<input type="text" id="searchCompanyText" name="searchCompanyText" />
<input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
<input type="checkbox" id="isActive" name="isActive" checked="checked" /> Active
</div>
Your width: 100% makes your element get width related to the parent object. Change it's value to non-relative: px, em...
Give your div a width, something that can contain all of the content you want but not 100% (as you have it now).
Here is your example altered with a width for the search box div:
http://jsfiddle.net/neilheinrich/xUd9k/