Spent already a lot of resources to figure out how to optimize extJs HTML code.
I have simple combobox with a label and extjs throw on a page this:
<tr role="presentation" id="inputs[1].TypeId-inputRow" class="x-form-item-input-row">
<td role="presentation" id="inputs[1].TypeId-labelCell" style="" valign="top" halign="left" width="88" class="x-field-label-cell">
<label
id="inputs[1].TypeId-labelEl"
for="inputs[1].TypeId-inputEl"
class="x-form-item-label x-unselectable x-form-item-label-left"
style="width:83px;margin-right:5px;" unselectable="on">
Placement ID:
</label>
</td>
<td role="presentation" class="x-form-item-body x-form-trigger-wrap-focus" id="inputs[1].TypeId-bodyEl" colspan="2">
<table id="inputs[1].TypeId-triggerWrap" class="x-form-trigger-wrap" cellpadding="0" cellspacing="0" style="table-layout: auto;">
<tbody>
<tr>
<td id="inputs[1].TypeId-inputCell" class="x-form-trigger-input-cell">
<div class="x-hide-display x-form-data-hidden" role="presentation" id="ext-gen1311">
</div>
<input
id="inputs[1].TypeId-inputEl"
type="text"
class="x-form-field x-form-required-field x-form-text x-trigger-noedit x-form-focus x-field-form-focus x-field-default-form-focus"
autocomplete="off"
name="inputs[1].TypeId"
placeholder="DATA SOURCE"
readonly="readonly"
aria-invalid="false"
data-errorqtip=""
style="width: 137px;">
</td>
<td valign="top" class=" x-trigger-cell x-unselectable" style="width:22px;" id="ext-gen1310">
<div class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-first" role="button" id="ext-gen1309">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
How could I change tables inside a tables just for simple xtype: 'combobox'?
I have hundreds like that on a page, it slows down a lot because very heavy HTML code.
it could be done with simple div wit ha float on it, why does extJS renders all this table code?
If you want/need a simpler markup in Ext, the only way is to code your own component where you can define a simpler one.
There is no way of simplifying the Ext generated markup without a danger of breaking functionality or layout engine.
Related
I am making a new signature for my email. Here is the code:
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
</style>
<table cellspacing="0" width="500" cellpadding="0" border="0" style="padding:20px 0 20px 0;">
<tr>
<td style="padding:0 9px 0 0;vertical-align: middle;" width="100" valign="top"> <img alt="Logo" width="100" style="width:100px;moz-border-radius:15%;khtml-border-radius:15%;o-border-radius:15%;webkit-border-radius:15%;ms-border-radius:15%;border-radius:15%;" src="https://i.ibb.co/FzTmBN9/testlogo.png" /> </td>
<td style="border-left:0px solid;vertical-align: top;border-color:#acacac;padding:0 0 0 0px;" valign="middle">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.6;font-family:'Open Sans','Verdana','Geneva',sans-serif;font-size:12px;color: #000000;letter-spacing:.8px;">
<tr>
<td> <span style="font: 12px 'Open Sans','Verdana','Geneva',sans-serif;color:#000000;">My Name</span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;color: #000000;"> </span> </td>
</tr>
<tr>
<td style="padding: 5px 0;">
<div style="font-family: 'Lato','Verdana','Geneva',sans-serif;font-size:11px;color: #000000;letter-spacing:1.2px;">My Company</div>
</td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 1: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7890</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 2: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7891</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">https:// </span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;">website.com</span> </td>
</tr>
</table>
</td>
</tr>
</table>
<span style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</span>
When I send myself a test email on my iPhone XS Max running iOS 13.5.1 it works well and displays like this:
But then if I rotate the phone horizontally it then does this:
And then when I turn it back to portrait mode it does this:
I am pretty sure this is a bug with the iOS mail app and not my code, however I want my signature to display well on any ordination. Why is this occurring? How can I fix this? I've tried adding in some breakes (<br>) and padding with no luck.
It's quite possible you need to put the span element within a table too. Alternatively, an easier option would be to use a paragraph tag instead of a span (make it a block element, not inline, in other words).
i.e.:
<p style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</p>
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 have a page with two large tables, one positioned above the other:
http://files.sportsmogul.com/Encyclopedia/1907/BOS/index.html
In my editor (Dreamweaver CC 2015), there is no space between the tables.
But in Chrome, there is a unwanted gap of about 10 pixels (the blue space where the background shows through, between the top "navbar" and the rest of the page).
When you open 'Developer Tools' in Chrome, you see that Chrome has INSERTED a 'br' tag on-the-fly. (You can see the tag in the Developer Tools, but Chrome doesn't make any changes to my HTML file).
The first table closes on line 69.
The second table opens on line 71.
There is no code between these two tables (much less a 'BR').
However, Chrome inserts a 'BR' tag when displaying the file.
Why is Chrome doing this and how can I stop it?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>
1907 Boston Americans
</title>
<link href="../../styles.css" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">body {background-color: #606080; background-image: url(../../wallpaper.jpg)}</style>
<script type="text/JavaScript">
function MM_jumpMenu(targ,selObj,restore)
{
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<a name="top"></a>
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellpadding="0" cellspacing="0" background="../../navbar0.jpg" bgcolor="#ffffff">
<tr><td width="70" valign="top" style="PADDING-LEFT: 10px; PADDING-TOP: 10px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="bottom"><b class="title">Year: </b></td></tr>
<tr><td height="27" valign="bottom"><b class="title">Team: </b></td></tr>
</table></td>
<td style="PADDING-TOP: 7px"><table border="0" cellspacing="0" cellpadding="0">
<tr><td height="27" valign="top">
<form name="form1" id="form1">
<select name="menu1" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1901/BOS/index.html">1901</option>
<option value="../../1902/BOS/index.html">1902</option>
<option value="../../1903/BOS/index.html">1903</option>
<option value="../../1904/BOS/index.html">1904</option>
<option value="../../1905/BOS/index.html">1905</option>
<option value="../../1906/BOS/index.html">1906</option>
<option value="../../1907/BOS/index.html" selected>1907</option>
<option value="../../1908/BOS/index.html">1908</option>
<option value="../../BOS/index.html">All Years</option>
</select>
1906 | 1908
</form></td>
<td><span title="Show All Years"><img src="../../history.jpg" alt="All Years" width="28" height="22" border="0"></span></td>
</tr>
<tr><td height=27 valign="top">
<form name="form2" id="form2">
<select name="menu2" class="navbar" onchange="MM_jumpMenu('parent',this,0)">
<option value="../../1907/BOS/index.html" selected>Boston Americans</option>
<option value="../../1907/BSN/index.html">Boston Doves</option>
<option value="../../1907/BRO/index.html">Brooklyn Superbas</option>
<option value="../../1907/CHC/index.html">Chicago Cubs</option>
<option value="../../1907/CHW/index.html">Chicago White Sox</option>
<option value="../../1907/CIN/index.html">Cincinnati Reds</option>
<option value="../../1907/CLE/index.html">Cleveland Naps</option>
<option value="../../1907/DET/index.html">Detroit Tigers</option>
<option value="../../1907/NYG/index.html">New York Giants</option>
<option value="../../1907/NYY/index.html">New York Highlanders</option>
<option value="../../1907/PHA/index.html">Philadelphia Athletics</option>
<option value="../../1907/PHI/index.html">Philadelphia Phillies</option>
<option value="../../1907/PIT/index.html">Pittsburgh Pirates</option>
<option value="../../1907/SLB/index.html">St. Louis Browns</option>
<option value="../../1907/STL/index.html">St. Louis Cardinals</option>
<option value="../../1907/WSH/index.html">Washington Senators</option>
<option value="../../1907/index.html">All Teams</option>
</select></form></td>
<td><span title="Show All Teams"><img src="../../earth.jpg" alt="All Teams" width="28" height="22" border="0"></span></td>
</tr>
</table></td>
<td width="200"><img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76"></td>
<td width="198"><img src="../../navbar2g.jpg" border="0" alt="Leaders" width="198" height="76"></td>
<td width="198"><img src="../../navbar3.jpg" border="0" alt="Baseball Mogul" width="198" height="76"></td>
</tr>
</table>
<!-- Chrome inserts a BREAK (BR) here. -->
<table class="basic" width="HTML_TABLE_WIDTH" align="center" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td style="PADDING-RIGHT: 5px; PADDING-LEFT: 10px" align=center valign=top><BR>
<table class=table1 cellSpacing=0 cellPadding=0 width=310>
<tr class=tabletitle><td colspan="3">
<div align="center"><strong>1907 American League</strong></div></td></tr>
<tr class=header0>
<td width=195 class=ltl>Team</td>
<td width=60 class=ltc>Record</td>
<td width=55 class=ltc>GB</td></tr>
<tr><td class=lml>Detroit Tigers</td>
<td class=lmc>92 - 58</td>
<td class=lmc>—</td>
</tr>
<tr><td class=lml>Philadelphia Athletics</td>
<td class=lmc>88 - 57</td>
<td class=lmc>1.5</td>
</tr>
<tr><td class=lml>Chicago White Sox</td>
<td class=lmc>87 - 64</td>
<td class=lmc>5.5</td>
</tr>
<tr><td class=lml>Cleveland Naps</td>
<td class=lmc>85 - 67</td>
<td class=lmc>8.0</td>
</tr>
<tr><td class=lml>New York Highlanders</td>
<td class=lmc>70 - 78</td>
<td class=lmc>21.0</td>
</tr>
<tr><td class=lml>St. Louis Browns</td>
<td class=lmc>69 - 83</td>
<td class=lmc>24.0</td>
</tr>
<tr class=highlight2><td class=lml><B>Boston Americans</B></td>
<td class=lmc><B>59 - 90</B></td>
<td class=lmc>32.5</td>
</tr>
<tr><td class=lml>Washington Senators</td>
<td class=lmc>49 - 102</td>
<td class=lmc>43.5</td>
</tr>
</table></td>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 5px" align=center valign=top><br>
<table class="table1" cellSpacing=0 cellPadding=0 width=310>
<tr class="tabletitle"><td>
<div align="center"><strong>7th (AL)</strong></div>
</td></tr>
<tr class=header><td></td></tr>
<tr><td class=lml>Runs Scored: 464</td></tr>
<tr class="highlight"><td class="lml">Runs Allowed: 558</td></tr>
<tr><td class="lml">Attendance: 436,777</td></tr>
</table></td>
</tr>
First of all there is a <br> immediately after the navbar table: http://i.imgur.com/qLGU3Du.png
Remove that and most of the space will go away. The leftover space is caused by the 'Home', 'Leaders', and 'created by' images in the navbar. The default alignment for inline elements such as those reserves some space underneath for letter descenders. You need to add a vertical-align: top style to each of those 3 images to remove the space. For example, the first image would look like:
<img src="../../navbar1.jpg" border="0" alt="Home" width="200" height="76" style="vertical-align: top">
So after removing that <br> and adding those styles to the three navbar images, it should look like this: http://i.imgur.com/XdgcTjj.png which I believe is the effect you were going for.
Also, just as a side note, Dreamweaver makes your code look absolutely atrocious and almost impossible to read. It makes finding these problems very difficult, which may be why nobody has really been able to help.
There is in fact a <br> between your tables. Giving a line might not help because it could be different in dream weaver.
What I would suggest is, open this document and then once open, press the following at the same time. CTR + F (or CMD + F on a mac) A search box will pop up, then type <br> If you do this while at the top of the document it will bring you to the first break, otherwise go to the one nearest the top. That is the one causing issues. just delete it and problem solved!
Inside of every
<td colspan="3" style="PADDING-LEFT: 10px; PADDING-RIGHT: 10px">
are "br" tags. Search for this line and you will find them all, or look at what the poster suggesting using a search function has said, it is also sufficient.
My wife discovered at least a partial answer:
Phantom <br> tag rendered by browsers prior to <table> tag
Unfortunately, the solution to that question doesn't appear to solve my problem. I validated the code using the feature in Dreamweaver 2015 that submits it W3C service and it comes back with "No warnings or errors found".
The full HTML code for the table is as follows:
<table id="clearablecombo-1497" class="x-field clearableCombo x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: fixed; width: 287px;">
<tbody>
<tr id="clearablecombo-1497-inputRow">
<td id="clearablecombo-1497-labelCell" class="x-field-label-cell" width="105" valign="top" halign="right" style="">
<label id="clearablecombo-1497-labelEl" class="x-form-item-label x-form-item-label-right" style="width:100px;margin-right:5px;" for="clearablecombo-1497-inputEl">Document Status:</label>
</td>
<td id="clearablecombo-1497-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="clearablecombo-1497-triggerWrap" class="x-form-trigger-wrap" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td id="clearablecombo-1497-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1890" class="x-hide-display x-form-data-hidden" role="presentation"/>
<input id="clearablecombo-1497-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" type="text" style="width: 100%; text-transform: uppercase; -moz-user-select: text;" name="documentStatus" autocomplete="off" aria-invalid="false"/>
</td>
<td id="ext-gen1888" class="x-trigger-cell" valign="top" style="width:26px">
<div id="ext-gen1886" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over" role="button" style="-moz-user-select: none;"/>
</td>
<td id="ext-gen1889" class="x-trigger-cell" valign="top" style="width:26px">
<div id="ext-gen1887" class="x-trigger-index-1 x-form-trigger x-form-clear-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"/>
</td>
</tr>
</tbody>
</table>
</td>
<td id="clearablecombo-1497-errorEl" class="x-form-error-msg x-external-error-icon x-form-invalid-icon" width="0" style="display:none" data-errorqtip=""/>
</tr>
</tbody>
</table>
The part of the HTML I'm attempting to manipulate is this part specifically:
<div id="ext-gen1886" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over" role="button" style="-moz-user-select: none;"/>
The above part is the actual dropdown arrow which is also in the above large portion of the HTML. The drop down text I need to select is "Rejected". The HTML with the selection options are as follows:
<div id="boundlist-1558" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default" tabindex="-1" style="left: 136px; top: 346px; height: auto; z-index: 19001; width: 182px;">
<div id="boundlist-1558-listEl" class="x-boundlist-list-ct" style="overflow: auto; height: auto;">
<ul>
<li class="x-boundlist-item x-boundlist-item-over" role="option">All</li>
<li class="x-boundlist-item" role="option">Waiting QA</li>
<li class="x-boundlist-item" role="option">AutoTec Approved</li>
<li class="x-boundlist-item" role="option">User Approved</li>
<li class="x-boundlist-item" role="option">Rejected</li>
<li class="x-boundlist-item" role="option">Deleted</li>
</ul>
</div>
</div>
Anyone have any suggestions of the XPath I would use to do this? I tried just inputting the text like a textbox, however there are certain boxes such as the Country and State that have to be selected to enable each other.
I think 'role' is the best attr in this case to find the elements:
--this one select your desired element
"//div[contains(id, 'ext-gen')][#role='button'][contains(#class, 'x-form-trigger-over')]"
--this one select your desired option
"//li[#role='option'][text()='Rejected']"
As I understand these are the target elements:
xpath = '//div[contains(id, "ext-gen")][#class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over"]'
drop_down = self.driver.find_element_by_xpath(xpath)
drop_down.click()
xpath = '//li[#class="x-boundlist-item"][contains(text(), "Rejected")]'
option = self.driver.find_element_by_xpath(xpath)
option.click()
I'm trying to build a newsletter for an email campaign. I have to build it with tables and all that cause most of the email clients ignore thinks like div etc. now I have the problem that I would like to have the text obertauern ...... in one line and under it the line ( <hr> ) but its not working the way I would like to have it.
On the pic you can see what I'm trying to do and I put the html into jsfiddle.
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<td colspan="2">
<img src="head.jpg" width="700" border="0">
</td>
<tr>
<td colspan="2">
<p style="color:#00668a;text-align:left;font-size:18px;">
Wer den Sonnenskilauf im SalzburgerLand noch intensiv genießen möchte, den erwarten strahlender Sonnenschein, bestens präparierte Pisten und sensationelle Urlaubsangebote:
</p></td>
</tr>
<tr style="background-color:#deeef4;">
<td width="130" cellpadding="0" ><p style="color:#00668a;padding:10px">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span></p><a href="http://urlaub.salzburgerland.com/de/winterurlaub?utm_campaign=RK_WI_13&utm_medium=DE&utm_source=CARE-Verlag&utm_content=Newsletter" target="_blank">
<img src="ab1.jpg" width="250" height="138" border="0" style="padding:10px"></a>
<td width="200" height="163"><p>"Sund and Fun Wochen"</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
</ul><img src="button.png" width="345" height="35" border="0"></td></td>
</tr>
</table>
jsfiddle
just use the border property to create the line and change the p to a div so you do not put a lot of space after it:
<tr>
<td colspan="2">
<div style="border-top: solid 1px #00668a;height:1px;">
Here is a jFiddle:
http://jsfiddle.net/qXxPb/2/
Try:
<td width="600" cellpadding="0" >
For the td where the text is located (or use something else than 600).
I fixed your jFiddle: http://jsfiddle.net/mSLf4/5/
Should work like that, you missed some tablecells and I made your sentence in an extra row + set the cell to span over 2 cells.
Should work now, next time validate your code first please.
<td colspan="2">...</td>
was the important line.