I am trying to select an i element as follows:
//div[contains(text(), "daddsadas#lol.com")]//parent//i[contains(#class, "fa fa-pencil")]
From the following HTML:
<td ng-class="{true:'disable'}[contact.status=='deactive']">
<div class="email ng-binding">daddsadas#lol.com</div>
<div class="name">
<table>
<tbody>
<tr>
<td class="ng-binding">
Test Last
</td>
<td>
<i class="fa fa-pencil" ng-click="display_edit_contact_form(contact)"></i>
<i class="fa fa-trash" ng-click="delete_contact(contact)"></i>
</td>
</tr>
</tbody>
</table>
</div>
</td>
I cannot seem to get it to work. Any help would be great.
You can actually avoid traversing the tree, going up and down by using following:
//div[. = "daddsadas#lol.com"]/following::i[contains(#class, "fa-pencil")]
Managed to solve this by treating xpath queries the same as a file system:
//div[contains(text(), "daddsadas#lol.com")]/..//i[contains(#class, "fa-pencil")]
Related
I'm displaying a percentage in my website like 44%. Both value and subscript are of different font. The subscript is not coming correctly.
I'm sharing the code below:
<table>
<tr>
<td>
<b>
<div style='display:block;'>
<span style='font-size: 220px;line-height: 200px;'>44
<span style='font-size:20px;display: inline-block;vertical-align: top;'><sup>%</sup>
</span>
</span>
</div>
</b>
</td>
</tr>
</table>
I want the percentage symbol just above and very close to the value. Now there is lot of space between the value and % symbol. Can anyone help me to fix this?
Thanks in advance.
Consider adding line-height to the <sup> as well.
<table>
<tr>
<td>
<b>
<div style='display:block;'>
<span><span style='font-size: 220px;line-height: 200px;'>
44<sup style='vertical-align:top;font-size:20px;line-height: 50px;'>%</sup></span>
</span>
</div>
</b>
</td>
</tr>
</table>
I'm using Angular2-Collapsible for my project. On clicking the table row, I want the details to be displayed. The code is attached below. Basically if I add [detail]= "detail1" then the collapsible-table-row-detail would be displayed on click. But since I'm using a for loop, I have to use the variable i. I've tried [detail]= "'detail'+i" and [attr.detail]= "'detail'+i". Nothing seems to be working.
<collapsible-table [type]="'accordion'" borderedVertically="true" class="table">
<thead class="table-heading">
<collapsible-table-row>
<th></th>
<th>Reference ID</th>
<th>Order ID</th>
<th> OName</th>
<th>FP</th>
<th>SP</th>
<th>Stat</th>
<th>date</th>
</collapsible-table-row>
</thead>
<tbody>
<collapsible-table-row *ngFor="let detail of details; let i = index" [attr.data-index]="i" [detail]="'detail'{{i}}">
<td><div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td (click)="showFirst=!showFirst"><i class="material-icons" *ngIf="showFirst"><span class="bulleticon"> - </span></i><i class="material-icons" *ngIf="!showFirst"><span class="bulleticon"> + </span> </i>{{detail.Reference_Id}}<br></td>
<td> {{detail.OId}} </td>
<td>{{detail.OName}}</td>
<td>{{detail.FP}}</td>
<td>{{detail.SP}}</td>
<td>{{detail.Stat}} </td>
<td>{{detail.date}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5">
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data1 </li>
<li> data2 </li>
<li> data3</li>
</ul>
</div>
</div>
</tbody>
</collapsible-table-row-detail>
Thanks in advance!
Edit: Here's a stackblitz implmentation of what I'm trying to acheive. I've used [detail]= "detail1" for demo purposes. But I need to use a variable "i" in the for loop.
Visit https://stackblitz.com/edit/angular-fw5upv.
Try using
[detail]=" 'detail' + i "
Or
detail="detail{{i}}"
Try this:
<tbody>
<ng-container *ngFor="let detail of details; let i = index" >
<collapsible-table-row [attr.data-index]="i" [detail]="detail1">
<td>
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</td>
<td >6565</td>
<td> {{detail.oid}} </td>
<td>{{detail.pname}}</td>
<td>{{detail.price}}</td>
<td>{{detail.qoh}}</td>
</collapsible-table-row>
<collapsible-table-row-detail #detail1 class="hidden-table">
<div class="container">
<div class="list col-5" >
<span class="heading"> Order details </span>
<ul class="unorderedlist">
<li> data4 </li>
<li> data5</li>
<li> data6 </li>
</ul>
</div>
</div>
</collapsible-table-row-detail>
</ng-container>
</tbody>
You can check in your stackblitz just replace the html code.
You could try using a method in your HTML like:
[detail]="getDetail(i)"
And then in your ts file:
getDetail(i: number) {
return 'detail' + i;
}
I have not tried this myself, so I'm not sure if it will work.
Me need to save table <table class="tftable" border="1"> information </table> . Remove other information before and after.
How to implement this is better. There are about 90,000 pages of this kind. The structure they all have the same. Information in the tables is different.
<h1>jnouaoh098hwgv 03g030h </h1>
<div class="list-posts">
<div class="post-item">
<div class="text">
<p>iuah8n987hauuih uouahou paniuaugpiubrebg940wbunv9wh0uvnw95n 8h 8hgu 0hu8gh</p>
<h2>594w81grghiwuehuwn</h2>
<table class="tftable" border="1">
<tr>
<th>aiurh8n 7a8 </th>
<th>aihnguaw </th>
</tr>
<tr>
<td>uuhqncm998m4</td>
<td>от 11 000 wg.</td>
</tr>
<tr>
<td>shshrs</td>
<td>оsuhrguhousehrg</td>
</tr>
<td>sre e</td>
<td>от 500 fs.</td>
</tr>
<tr>
<td>rseh sreh</td>
<td>от 400 ewf.</td>
</tr>
<tr>
<td>ge ge</td>
<td>от 350 gw.</td>
</tr>
<tr>
<td>eg</td>
<td>ge gew</td>
</tr>
</table>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<h5>aweaweh hahrhrhhrrrrrrrrrrarh
<ul>
<li><i class="fa fa-phone"></i> 598229929</li>
<li><i class="fa fa-envelope"></i> 5191iuhyg7g</li>
<li><i class="fa fa-map-marker"></i> 56cn847n9qc849</li>
</ul>
If you want to get all ocurrences of <table>, <\table> and the contents between this tags.
You can use this Regex in the search pattern:
.*?(<table(.*)<\/table>).*
And this token in the substitution field:
\1
Don't forget to check true for the options:
Regular Expressions
. Matches new line
Like this image:
I have this sample:
link
CODE HTML:
<table class="table prospects-table">
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Email</th>
<th width="200">Phone</th>
<th width="200">Message</th>
<th width="200">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td width="200">test sdada</td>
<td width="200">asdsada#yahoo.com</td>
<td width="200">(321) 312-3123</td>
<td width="200"> sadasda</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
<tr>
<td width="200">Diaconescu Cristian</td>
<td width="200">asdsadsa#busteco.rh</td>
<td width="200">(312) 312-3123</td>
<td width="200">asdasadsdasasasasdkhsdjkashsdkjahdhjsgdhjgvhhs,ajfkghjkdjhdsgjhasdghjgsadhjgshjkhvjgjkgfkjhdkjjhgfhjkdhkjsgdfv</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
</tbody>
</table>
I want each column of my table to have a width of 200px.
I added this code to each td but does not work ...
<td width="200">test sdada</td>
Probably something simple but I realize why this code does not work.
Can you tell me please what is the problem and how to solve it?
Thanks in advance!
Why don't you just add a style tag to your code?
In the head just insert this:
<style>
td,th {width:200px}
</style>
Add table-layout: fixed; to your table
table{
table-layout: fixed;
}
Updated codepen
use this
<td style="width: 200px;">test sdada</td>
learn proper css take a loot at element level css here
you can add css :
style="width:200px";
DEMO HERE
try this one
<td width="70%">JXXXXXX</td>
hope this one help you
Width attribute is deprecated one. So it is better to use css width property instead.
Usage Note: Do not use this attribute, as it has been deprecated and
the rules should be defined and styled using CSS. Use the CSS property
width instead. - MDN
td, th {
width: 200px;
}
width of td doesn't work at HTML5,
use CSS styles instead , for example in simplest way
<style type="text/css">
.tdw{
width:200px;
}
</style>
<td class="tdw">Diaconescu Cristian</td>
The dropdown on the right is in a table cell, this works as intended on desktop browser.
However on mobile, on click, the dropdown gets split into two lines:
HTML
<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
<div class="btn-group">
<i class="icon-eye-open icon-white"></i> Visualizza
<button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Modifica</li>
<li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
</ul>
</div>
</td>
</tr>
</table>
The problem most likely stems from the table cell width being laid out too short for both elements.
The simplest solution would be to set add a class to that cell and add min-width, though you would be moving away from pure bootstrap.
HTML:
<td> ... </td>
<td class="dropdownCell">
<div class="btn-group">
...
Css:
.dropdownCell { min-width:130px; }
Fiddle is here: http://jsfiddle.net/a4kx75t1/1/