I have the following for Google Chrome:
<table>
<tr>
<td width="80px">
Text
<td width="100%">
<form>
<input style="width:100%" type="text"/>
<button>Submit</button>
</form>
</td>
<td width="80px">
Text
</td>
</tr>
</table>
The problem is when you resize the screen to something small, the Submit button wraps around under the textbox. How do I keep the "button" from wrapping (as in the button shows up below the textbox by a few pixels), while keeping the text box as wide as possible?
http://jsfiddle.net/N36a7/
<form>
<table>
<tr>
<td width="80px">Text</td>
<td width="100%">
<input style="width:100%" type="text"/>
</td>
<td>
<button>Submit</button>
</td>
<td width="80px">Text</td>
</tr>
</table>
</form>
Just give the button it's own td.
First, add the following styles to the form to prevent it from wrapping:
form{
white-space: nowrap;
}
Then remove the style width=100% from the input, which causes it to occupy all of the horizontal space within the td.
JS Fiddle: http://jsfiddle.net/B4eWz/
Related
I am trying to align the bottom of an textarea to the bottom of a textfield. I just set the height of a the textarea with CSS
#your-comments {
height: 87px;
}
Now on a PC + Chrome/Firefox it seems correct.
Even on my Mac + Chrome/Safari it seems to be correct.
The only problem is my Mac + Firefox, there is a gap of 5px.
Is there a way the bottom of the textfield and textare align correctly?
You can use tables to make it fit to work with different browsers.
eg: https://jsfiddle.net/praveen_solanki/dj5hmt0z/
<table style="width:400px">
<tr>
<td style="width:50%" ><input type='text' value='Name' /> </td>
<td style="width:50%" >Comment Box </td>
</tr>
<tr>
<td style="width:50%" ><input type='text' value='Age' /> </td>
<td style="width:50%" ROWSPAN=3 ><textarea style="width:95%;height:100%;" type='text' value='comment' > </textarea> </td>
</tr>
<tr>
<td style="width:50%" ><input type='text' value='emailid' /> </td>
<td style="width:50%" > </td>
</tr>
in above code i have created table in which i have added a textarea and marked it height to 100% to match the fixed size.
Let me know if you have questions.
How do i align the iframe elements that's inside the table cell along with the rest of the table cells inside the table so that it appears in the same way if it were a td element. ?
I tried to align by adding inline style position:relative; top:-4px to the iframe element.
<iframe src="Static/Pan.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell; position:relative; top:-4px"></iframe>
I don't think this is the right way. Are there any alternative ways to align it?
Main Html
<table id="mytable">
<tr>
<td>Name
</td>
<td>Phone Number
</td>
<td>Address
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<iframe src="Address.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell;"></iframe>
</td>
<td>
<input type="text" />
</td>
<td>
<input type="button" value="update" />
</td>
</tr>
</table>
Iframe Address.htm
<html>
<body>
<div>
<input type="text" />
</div>
</body>
</html>
This is the actual output:
This is the intended output:
Target the desired cells like this :
td {
vertical-align: top;
}
This will align the content of your cell to the top of the cell.
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"> </td>
</tr>
<tr> <td> Comments </td>
<td> <textarea style="width: 300px; height:300px;" name="comment">Something</textarea></td>
</tr>
Above code will form a simple form in Web page. However the text "comments" doesn't inline in appropriate section of the table. I want this text to be in top of the box however it shows in the middle of the box. Is there any method to make it in the correct place that I want to so that the form looks standard. Is it CSS that I have to use?
Add vertical-align:top style to <td> element, i.e.:
<td style="vertical-align:top"> Comments </td>
JSFiddle demo
See this link for documentation for vertical-algin property, including list of values other than top you could use.
You need to use CSS for this, try following code,
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"> </td>
</tr>
<tr> <td style = "vertical-align:top;"> Comments </td>
<td> <textarea style="width: 300px; height:300px;" name="comment">Something</textarea></td>
</tr>
Why not apply a class, e.g:
tr td:first-child {
vertical-align:top;
}
Per this example
If you also want to right align your items, see this demo
Just add valign attribute to the td.
<td valign="top"> Comments </td>
See this link for vertical align documentation
Im trying to make a search bar like google, i have it all pretty much worked out, im just not sure how to make the search bar wider, heres the code i have so far
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<FORM name="doingasearch" id="doingasearch">
<p align="center"><INPUT name=searchbox type=text size=20></p>
<p align="center"><INPUT type="button" value="Search" onclick="return
googleSearch();">
<INPUT type="button" value="I Feel Lucky" onclick="return googleSearch
();"></p>
</FORM>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
If you find anything wrong with it, please say so
You could either do it in your HTML:
<input name="searchbox" type="text" size="40" />
Or you could do it the right way, with CSS:
input {
width: 200px;
}
You should refrain from tables when using search forms. Anyways, you could do two things here.
Either remove the size="20" from the searchbox <input> and change the width in CSS or you can increase the <input> size.
like this:
input {
width: XXpx;
}
Is it possible to align textbox and image in same line so both of them occupy 100% of cell's width? (without setting specific width to the textbox like width:95%)
<table style="margin: 0px;float:left" border="1" width="50%" cellpadding="5" cellspacing="5">
<thead>
<tr>
<td class="title" colspan="2">
Options
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="header" style="width: 110px;">
Date
</td>
<td>
<input name="txtRelease" type="text" id="txtRelease" style="float:left;display: block;width: 100%;height: 100%;" /><input type="image" name="ImageButton1" id="ImageButton1" style="float:left;" src="http://www.classiclodges.co.uk/images/icon_date_picker.jpg" style="border-width:0px;float:right" />
</td>
</tbody>
</table>
http://www.webdevout.net/test?01O&raw
You can have your image as background on the textbox instead. Try this on your textbox css.
background: url("http://www.classiclodges.co.uk/images/icon_date_picker.jpg") no-repeat scroll right center transparent;
I used a wrapper element and absolute positioning.
Live demo: http://jsfiddle.net/62sAU/6/
Alternative layout (added some padding): http://jsfiddle.net/62sAU/7/
Do you want like this ? http://www.jsfiddle.net/Tt5gu/
For this you have to expand width of and set width in pixel.
In summary, you couldn't set width values very well. You have to calculate widths :)