Click here to view the image This is what happens the blue marked area is read and nothing after that the red marked area is NVDA speech viewer where what is getting read is getting read. I have a non-empty table but the contents are not read by the NVDA screen reader when used with Firefox browser. It reads every other contents that comes before the table. Below is the sample code that is displayed on the Popup Dialog. Don't want to use role="presentation" as this solves the problem for not reading the table but the screen reader reads as if its a plain text and not as a table.
<div role="dialog">
<h2>This is a H2 content. </h2>
<p>This is a paragraph</p>
<table style="width: 80%;">
<caption class="offscreen">this is the caption for the table.</caption>
<thead>
<tr>
<th style="width: 25%" scope="col">First Header</th>
<th scope="col">Second Header</th>
</tr>
</thead>
<tbody>
<tr><td>C11</td><td>C21</td></tr>
<tr><td>C21</td><td>C22</td></tr>
<tr><td>C31</td><td>C32</td></tr>
<tr><td>C41</td><td>C42</td></tr>
<tr><td>C51</td><td>C52</td></tr>
</tbody>
</table>
</div>
Related
Maybe the title is more confusing than the problem it self. Here's my situation, with Thymeleaf I show a table with a list of clients. It shows Name, LastName, a button to delete it and a checkbox to display it's state (if the user is active or inactive)
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr th:each="client : ${clientList}">
<td th:text="${client.name}"></td>
<td th:text="${client.lastName}"></td>
<td>
<a th:href="#{/delete_client/} + ${client.id}" class="btn btn-danger">Delete</a>
</td>
<td>
<input type="checkbox" name="my-checkbox" th:checked="${client.state} ? 'checked'">
</td>
</tr>
</tbody>
So far, no problem. But what I don't know how to do is communcate the controller when the user click the checkboxes, in order to disable or enable that particular client.
Something like what the button does to delete the client, but to change it's state.
I was told to use AJAX, but don't know how.
Thank you!
You can avoid ajax. For deleting-alike effect you can apply following steps to the td element containing a checkbox:
wrap up the checkbox in the form tag
provide the proper action attribute in the form. The action is an endpoint which handles updating of a client's state (similarily to/delete_client/)
provide onclick="submit();" attribute in the checkbox, which will trigger mentioned endpoint when the user clicks it
E.g.
<td>
<form th:action="#{/switch_client_state/} + ${client.id}">
<input type="checkbox" name="my-checkbox" onclick="submit();" th:checked="${client.state} ? 'checked'">
</form>
</td>
In this example i have this code:
<table class="basicinfo" cellspacing="0">
<tr class="header">
<td colspan="3">
<div>
<h2 class="prod_card">Basic info</h2>
</div>
</td>
</tr>
<tr class="row2 item">
<td class="cell0">
<div>
Year
</div>
</td>
<td class="cell1">
<div>
2005
</div>
</td>
</tr>
<tr class="row3 item alt">
<td class="cell0">
<div>
Extra
</div>
</td>
<td class="cell1">
<div>
-
</div>
</td>
</tr>
</table>
Now, i want to get (for example) the year. I'm trying to get the next div content after the div with Year content.
I'm using this xpath without success:
//div[preceding-sibling::div = 'Year']
And anyone knows a good website to start learning xpath? Thanks in advance!
Following XPath
//div[parent::td/preceding-sibling::td//div[normalize-space()= 'Year']]
has the result
<div>2005</div>
Your XPath didn't work because the div you are looking for has not a div element as preceding-sibling but a td as parent. The preceding-sibling::td of this td contains a div which has the text "Year" - td//div. Using normalize-space() returns the text of this div without any spaces which can be necessary when checking for equality.
For reference: normalize-space(), and as you asked for good resources - I don't want to recommend anything special, but you should have a look at the resources mentioned at the info given on stackoverflow here: https://stackoverflow.com/tags/xpath/info (if not already done) and, for XPath axes, this is a good visualization: http://www.xmlplease.com/axis
I had to edit existing custom template in MailChimp service where drag&drop of content blocks isn't working. Template had a lot of nested tables so I contacted their support with response that some of block are nested and it might cause conflicts. To make simple test case scenario I removed most of code, styles and left just one repeatable block with one editable header inside.
I was doing everything as mentioned in this part of documentation.
According to article, on edit screen after clicking on this double arrow some kind of yellow bar should popup but there was nothing happening. I tried to click and drag it.
Question here is how make replicable and draggable content block on MailChimp.
My code below.
<body leftmargin="0" marginwidth="0" topmargin="0" style="color: #fff;" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top" style="padding-right:33px; padding-left:33px; text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateLectures">
<tr>
<td valign="top" style="padding-top:10px; padding-bottom:10px; font-size: 12px;">
<h3 class="imagereplacement" style="text-indent: 100%; white-space: nowrap; overflow: hidden;padding-bottom:10px;"><img src="http://gallery.mailchimp.com/42cd17e5e3c7c6f9274766dc5/images/lectures.png"><span style="display: block !important;">Lectures</span></h3>
<div mc:repeatable="lecture" mc:variant="lecture" class="single_event">
<h5 mc:edit="lecture_event_title">Koloman Moser In Context</h5>
<h6>Thursday, May 23</h6>
<p class="eventtitle">Christian Witt-Dörring</p>
<p class="eventtext">Curator, Koloman Moser, Designing Modern Vienna 1897–1907</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
Save your template. After go in campings, create new camping, click next, after this choose your template, and after this you can drag your blocks and save changes if you want.
I've following XPath of an element and want to extract text using verifyText() command in selenium.
Full XPATH: html/body/table[2]/tbody/tr/td[3]/table/tbody/tr[4]/td/table/tbody/tr[2]/td/table/tbody/tr[2]/td
Portion of html is shown below, how to get text i.e "A Loading icon will appear when you..." using verifyText() command in selenium?
this text is dynamic and can be changed.
<table width="730" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<tr>
<td height="30" colspan="2">
<strong>A Loading icon will appear when you click "Login" button.</strong>
In case you do not see such icon, it would mean that you are not using a compatible browser
</td>
</tr>
<form id="form1" method="post" autocomplete="off" action="/Login/Password"/>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
You can use the command verifyTextPresent which accepts a pattern to match with the text of the page.
Or if there is only tag as you have mentioned, you can use verifyText("//td","Message to verified")
The set up:
<table width="600" >
<tr>
<td width="400" rowspan="2" valign="top">
With very long content here*
</td>
<td width="200" valign="top">
Top-aligned content
</td>
</tr>
<tr>
<td valign="bottom">
*Bottom-aligned content loses vertical alignment
and appears as if valign="middle"
</td>
</tr>
</table>
Example code is in jsfiddle as it is too long (lots of content needed to trigger the bug).
So see these:
http://jsfiddle.net/webhelpla/XZyg2/ sent as an email looks OK
http://jsfiddle.net/webhelpla/XZyg2/1/ sent as an email: bottom-aligned content is not bottom-aligned anymore.
Any ideas and experience with workarounds for this?
try adding vertical-align:bottom; as well,
<td valign="bottom" style='vertical-align:bottom;' >
*Bottom-aligned content loses vertical alignment
and appears as if valign="middle"
</td>
try this fiddle. i removed the rowspan=2 from the td, always use cellpadding in place of that.
Add table-layout:fixed to the css for the table and see if that helps. Coder1984 is correct in adding the "style=" tag inside the td since some email clients do better with that....
At any rate, it is very hard to predict how html email will render in various clients. I use email on acid to check rendering in a wide range of clients, from webmail through email clients to mobile....
Outlook has an issue with content of blocks over a certain size (2300px if I remember correctly). You may be able to avoid the issue with a third cell in your right-hand row:
<table width="600" >
<tr>
<td width="400" rowspan="3" valign="top">
With very long content here*
</td>
<!-- Add minimal heights to force the middle row to take the space -->
<td width="200" valign="top" height="1">
Top-aligned content
</td>
</tr>
<tr><td style="page-break:always"><!-- Let's make a page break *here* --></td></tr>
<tr>
<td valign="bottom" height="1">
*Bottom-aligned content loses vertical alignment
and appears as if valign="middle"
</td>
</tr>
</table>