<tbody>
<tr class="" style="height:65px;">
<tr class="" style="height:65px;">
<td class="dhx_matrix_scell" style="width:99px; height:64px;">Ashmita </td>
<td>
<div class="dhx_matrix_line" style="width:1181px; height:65px; position:relative;">
<div class="dhx_marked_timespan dhx_matrix_now_time" style="height: 64px; left: 105px; width: 1px; top: 0px;"></div>
<div class="dhx_marked_timespan gray_section" style="height: 64px; left: 588px; width: 591px; top: 0px;"></div>
<div class="dhx_cal_event_line Booked" style="position:absolute; top:2px; height: 17px; left:99px; width:28px;" event_id="1374736442513">
<table class="" cellspacing="0" cellpadding="0" style="width:1181px; height:65px;">
</div>
</td>
</tr>
<tr class="" style="height:65px;">
<tr class="" style="height:65px;">
<tr class="" style="height:65px;">
<tr class="" style="height:65px;">
</tbody>
In the above code when I hover the mouse on the element <div class="dhx_cal_event_line Booked" style="position:absolute; top:2px; height: 17px; left:99px; width:28px;" event_id="1374736442513">, I get a tooltip tipsy which is generate dynamically; I can't catch it using firepath. I have tried the action class like
Actions action = new Actions(driver);
WebElement element = driver.findElement(By.xpath(".//*[#id='scheduler']/div[3]/table/tbody/tr[2]/td[2]/div/div[4]"));
action.moveToElement(element).build().perform();
System.out.println("the tool tip text is"+element.getText());
action.moveToElement(element).release().build().perform();
but i get null as element text.
When you do this:
Actions action = new Actions(driver);
WebElement element = driver.findElement(By.xpath(".//*[#id='scheduler']/div[3]/table/tbody/tr[2]/td[2]/div/div[4]"));
action.moveToElement(element).build().perform();
Put a String source = driver.getPageSource(); and then save that source somewhere (or print it to console)
Take a look at the page source, to see what element has the tooltip text in it, and then you can write a selector for it.
Related
I try to import an email-template in campaign monitor, but it shows always the same problem:
No unsubscribe link We require a single-click unsubscribe link in every campaign you send. Please add the tags and around the words you want to become an unsubscribe link.
What I do not understand is, that I have the tag in my template:
<layout label="POST-FOOTER25">
<table width="100%" bgcolor="#fff" cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody>
<tr>
<td width="100%">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthinner">
<tbody>
<!-- Top Spacing -->
<tr>
<td width="100%" height="10" style="font-size: 0;line-height: 0;border-collapse: collapse;"> </td>
</tr>
<!-- Top Spacing -->
<tr>
<td width="100%">
<table width="560" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthinner">
<tbody class="">
<tr class="">
<td width="100%" align="right" valign="middle" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 12px; line-height: 16px; color: rgb(62, 69, 76); text-align: center; font-weight: 400;" mgedit="text" class="aligncenter">
<multiline label="text617_86">
<!--[if !mso]><!-->
<span style="font-family: 'Open Sans', Arial, sans-serif;">
<!--<![endif]-->
You are receiving this email because you subscribed for updates on our website. <unsubscribe>Click here to Unsubscribe</unsubscribe><br /><br />
<preferences>Manage your subscription</preferences>
<!--[if !mso]><!-->
</span>
<!--<![endif]-->
</multiline>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Bottom Spacing -->
<tr>
<td width="100%" height="10" style="font-size: 0;line-height: 0;border-collapse: collapse;"> </td>
</tr>
<!-- Bottom Spacing -->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</layout>
There is no comment or if-case around the unsubscribe-tag. Any other idea?
Greets, yab86
I'd recommend moving the unsubscribe and preferences markup out of the multiline markup area. It's likely their system doesn't recognize it because it's put into the editable multiline WYSIWYG Editor
I wrote a small calculator app for some formulas using cordova and onsenui.This app works fine on android and iphone but when I am using it on an ipad, the blinking cursor keep popping up above the text field, just like in the image I have posted, the cursor should be in yellow Litres textfield but it pops above it. Here is the code for the viewform
<table border="0" cellpadding="0">
<tr style="height: 28px;">
<td style="padding-right: 8px;">Litres:</td>
<td align="center" style="background-color: #92D050; color: #000000;"><b>{{litres | setDecimal:3}}</b></td>
<td><b> Required</b></td>
</tr>
<tr>
<td style="padding-right: 8px;">Bag Size:</td>
<td><ons-text-input ng-model="bagsize" placeholder="0" ng-change="doCalc()" type="number" pattern="[0-9]*" inputmode="numeric" min="0" style="width: 80px; background-color: #FFFF00; color: #000000"></ons-text-input></td>
<td><b> Litres</b></td>
</tr>
<tr style="height: 28px;">
<td style="padding-right: 8px;">No of Bags Required:</td>
<td align="center" style="background-color: #92D050; color: #000000;"><b>{{totalbags | setDecimal:3}}</b></td>
<td><b> </b></td>
</tr>
</table>
Can someone tell me why it only happens with ipad, and how can I solve this issue?
I need two form fields in each line both against ab imaginary vertical central line, with the labels preferably on top, otherwise on each end away from the centre.
The nearest I have come is in
How to align multiple form elements?
but I need to place the fields in the middle.
can you help?
Thank you
qim
PS - I apologize if this is too vague but I only met HTML/CSS 10 days ago and I am a bit lost.
Try this may be it is helpful to you:
<div style="width: 100%; text-align: center; height: 100px;">
Label1
<div>
<input type="text" />
</div>
Label2
<div>
<input type="text" />
</div>
</div>
Do you need like this:
<div style="width: 100%; text-align: center; height: 100px;">
Label1
<div>
<input type="text" style="margin-right:5px;">
<input type="text" style="margin-left:5px;">
</div>
Label2
<div>
<input type="text" style="margin-right:5px;">
<input type="text" style="margin-left:5px;">
</div>
</div>
<div style="width: 100%; text-align: center; height: 100px;">
<div style="float: left; text-align: right; width: 47%;">
Label1
</div>
<div style="float: left; text-align: left; width: 47%; margin-left: 6%;">
Label2
</div>
<div>
<input type="text" />
<input type="text" />
</div>
<div style="float: left; text-align: right; width: 47%;">
Label3
</div>
<div style="float: left; text-align: left; width: 47%; margin-left: 6%;">
Label4
</div>
<div>
<input type="text" />
<input type="text" />
</div>
</div>
or simply use this :
<table style="width: auto; text-align: center; margin: 0 auto;">
<tr>
<td>
Label1
</td>
<td>
Label2
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
Label3
</td>
<td>
Label4
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
In the ASP.NET MVC Razor engine I want to show three data entries in each row so I write this:
<table width="100%" border="0" cellspacing="22" cellpadding="0" style="line-height:18px;">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
#{
int counter = 0;
foreach (MVCTaranehMah.Models.Folder item in ViewBag.items)
{
counter++;
if(counter%3 == 0)
{
<tr>
}
<td width="205" height="180" align="center" valign="top"><br />
<p align="center" valign="top" class="header3">#item.title</p>
</td>
#if(counter%3 == 0)
{
</tr>
}
}
}
</tr>
</table>
</td>
</tr>
</table>
But I get this error
The code block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.
What's the problem and how can I do something like this?
I think the code does not like that you seemingly have unclosed HTML tags.
Place before the tr, #:
Remove # from the front of the other if statement.
For example:
if (counter%3 == 0)
{
#:<tr>
}
Rather than trying to force the list into a table, you could just render it as a list:
<ul class="thumbs">
#foreach (var item in ViewBag.Items)
{
<li>
<a href="galleryDetails?id=#item.id">
<img src="#Url.Content(item.thumb)">
#item.title
</a>
</li>
}
</ul>
Styling the list to display with three items per row is trivial. Start here, and tweak it as needed:
ul.thumbs {
overflow: hidden;
}
ul.thumbs li {
float: left;
width: 205px;
height: 180px;
margin: 22px;
text-align: center;
}
ul.thumbs img {
width: 173px;
height: 173px;
border: 0;
}
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The align attribute is old-style "tag-soup" HTML, deprecated according to an official W3 document. Prefer CSS styling, as with
<td style="text-align: center;">
<!-- Content -->
</td>
Better still, give the TD a className (e.g., a semantic className like "center") and set that style in the stylesheet:
td.center {
text-align: center;
}
CSS:text-align and HTMLElement.align property works differently if there are block elements(Ex: tables) as children, so replace with caution.
See this demo below for reference.
.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }
.CenterSelf { margin: auto }
.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }
.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }
<table class="Container" align="center">
<tr><td>TABLE1</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<table class="Container" style="text-align: center">
<tr><td>TABLE2</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
DIV1
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
DIV2
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
DIV3
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
DIV4
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
<tr>
<td> </td>
<td colspan="2">TABLE</td>
<td colspan="2">DIV</td>
</tr>
<tr>
<td>Elements</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
</tr>
<tr>
<td>Self</td>
<td>O</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>inline child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>inline child of inline child</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>block child</td>
<td>X</td>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>inline child of block child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
</table>
O: Centered
X: Not centered