I have this table:
<table border="1" style="width:100%">
<tr>
<td>Message</td>
<td>Preview:</td>
</tr>
<tr>
<td width="50%">
<div style="float:left;">
<textarea name="message" rows="10" cols="50" onkeyup="preview(this.value)">Enter your message here</textarea>
</div>
</td>
<td style="background-color:rgb(255, 170, 0);" id="preview">
<div>Enter your message here</div>
</td>
</tr>
</table>
It's a textarea with a preview of how it will look next to it.
However, all the text in the preview cell is vertically centered, when I want it to start at the top.
How can I fix this?
<td style="background-color:rgb(255, 170, 0); vertical-align: top;" id="preview"><div>Enter your message here</div></td>
Just add vertical-align: top property and then it should works.
use vertical-align:top (by default it's work for table not other html element)
read this:
http://www.w3.org/wiki/CSS/Properties/vertical-align
add following code in css,
table tr td {
vertical-align:top;
}
Related
i am trying to click on 2nd item(Not Know) in the Td element. I was able to click on the 1st item(known Issue) by using its xpath. How ever i am not able to do the same thing with the 2nd option. i am getting following error
Unable to locate an element with the xpath expression
//*[#id='group_tree']/div/div/div/div[1]/div/div[1]/table/tbody/tr/td[[contains(text(), 'Not Known')]
because of the following error:
below is my code:
driver.findElement(By
.xpath("//*[#id='group_tree']/div/div/div/div[1]/div/div[1]/table/tbody/tr/td[[contains(text(), 'Not Known')]"));
and my HTML is
<div style="display: block;">
<div>
<table cellspacing="0px" cellpadding="0px"
style="background-color: transparent;">
<tbody>
<tr>
<td><img class="tree" src="images/s.gifx" alt=""
style="margin-left: 16px;"></td>
<td class="tree_spacer"><img alt="" src="images/nav_bult.gifx"></td>
<td title="" class="tree_item_text"><a
name="37fd8721a9729140d11a2c59127b17a6">Known issue</a><span></span></td>
</tr>
</tbody>
</table>
<div></div>
</div>
<div>
<table cellspacing="0px" cellpadding="0px"
style="background-color: transparent;">
<tbody>
<tr>
<td><img class="tree" src="images/s.gifx" alt=""
style="margin-left: 16px;"></td>
<td class="tree_spacer"><img alt="" src="images/nav_bult.gifx"></td>
<td title="" class="tree_item_text"><a
name="ea1e8721a9729140d11a2c59127b17fb">Not known</a><span></span></td>
</tr>
</tbody>
</table>
<div></div>
</div>
</div>
i tried finding the element by name, by xpath and contains but everything is throwng error
Please Help
Before doing anything first check if your html is valid, I verified that your html misses matching </img> tags for the existing <img> tags.
Now, I assume you want the td elements with Known issue and Not known as text for a elements.
The following xpaths will give you those :
//td[#class='tree_item_text' and ./a/text()='Known issue']
//td[#class='tree_item_text' and ./a/text()='Not known']
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
I am trying to make the following working the way I want it to. I want to have an Input element changing its width to the provided cell's width. Here is code:
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<div style="width:100%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</div>
</td>
</tr>
</table>
I want the input in the last cell to take all the width of the cell it's in.
Unless I provide a width of the input it's not happening.
Put width: 100% on the input element itself, not on a div surrounding it (you can get rid of that div altogether in fact).
Demo: http://jsfiddle.net/1qda1jpx/2/
table {
border: 1px solid blue;
}
td {
border: 1px solid lightgray;
}
input {
width: 100%;
}
<table style="margin-top:10px;width:80.5%;font-size:14px">
<tr>
<td style="text-align:left;width:5%">
<span translate>CaseNumber</span>:
</td>
<td style="text-align:left;width:5%">
<span>
<input easyui-textboxreadonly readonly ng-model="caseid" style="width:80px;height:32px;background-color:#72A4D2"/>
</span>
</td>
<td style="text-align:left;width:2%">
<span translate>Title</span>:
</td>
<td style="width:88%">
<input easyui-textbox data-options="required:true" ng-model="title" style="height:32px;"/>
</td>
</tr>
</table>
You need to set width: 100% for that input element. Otherwise it wont happen.
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I have following markup
<div class="dc2-search-form">
<table width="100%">
<tbody>
<tr>
<td>
<div class="search-form-label">
<span id="StreetAddress_Label">Address</span>
</div><br>
<input style="height: 10px; width:80px" tabindex="0"
type="text" value="">
</td>
<td>
<div class="search-form-label">
<span id="Sales_Cycle_Label">Sales
Cycle</span>
</div><br>
<input style="height: 10px; width: 80px;" tabindex="0" type="text" value="">
</td>
</tr>
</tbody>
</table>
And following CSS
.dc2-search-form {
overflow-x: scroll;
}
.dc2-search-form table {border-collapse:collapse;border-spacing:0;border:0}
.dc2-search-form .search-form-label{font-size:13px;background-color:#BFBFBF;padding:10px 0 10px 1px; border-top:1px solid black;border-bottom:1px solid black;}
.dc2-search-form table select,input{height:10px;font-size:10px;padding:2px;}
Here is the jsfiddle for reference
It gives me the desired output except for a tiny bit space between table cells. I need to make the span div appear as seamless one row with border on top and bottom but I am to able to accomplish that due the space.
How to remove the space between them.
Apply no padding to your table cells:
.dc2-search-form table td{padding:0}
JSFiddle
add cellspacing=0 cellpadding=0 to your table
update fiddle
<table width="100%" cellspacing=0 cellpadding=0>
Try setting the cellpadding and cellspacing to 0, like this:
<table cellpadding='0' cellspacing='0'>
...stuff...
</table>