<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div></th>
<th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">...</div>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div></th>
<th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">...</div>
how do I select all 'th' element using css selectors that do not have a classname? All the 'th' elements have exactly the same attributes except classname and I need the ones without it. I tried th[classname=''] and that does not do the trick. I tried all the css selection options like 'no-child' etc, still it always returns all th elements
Assuming your HTML is properly formed, you can use :not() with the attribute selector []. Ex th:not([class])
Example:
th:not([class]) {
color: red;
}
<table>
<tr>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="2">123</div>
</th>
<th id="" class="abc_naem" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="4">123</div>
<th style="position: relative; top: 0px;">
<div style="width: 48.003906px;" data-lngst="nullpx" data-ndx="5">123</div>
</th>
<th id="" class="abc_phase" nowrap="" style="position: relative; top: 0px;">
<div style="width: 44.003906px;" data-lngst="nullpx" data-ndx="3">123</div>
</th>
</tr>
</table>
Related
The <th> are stacked on top of each other and the <td> are also stacked on top of each other. I am trying to alternate <th>over <td> for mobile devices. Your feedback would be helpful!
confirmation.html
<table class="table table-hover table-bordered table-responsive-vertical">
<thead class="thead-light">
<tr class="text-center">
<th scope="col" data-toggle="true">Venue</th>
<th scope="col">Quantity</th>
<th scope="col">Ticket Price</th>
<th scope="col">Hearing Loop</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr class="text-center">
<th scope="row">{{ticket.venue}}</th>
<td class="text-center">{{ticket.quantity}}</td>
<td class="text-center">$25.00 each</td>
<td class="text-center">{{ticket.loop}}</td>
<td class="text-center">${{ticket.total | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Sales Tax</th>
<td class="text-center">${{ticket.tax | floatformat:2}}</td>
</tr>
<tr>
<th colspan="4" class="text-right">Total</span></th>
<td class="text-center">${{ticket.total_price | floatformat:2}}</td>
</tr>
<tr>
<td>EditDelete</td>
<td colspan="4">Checkout</td>
</tr>
{% endfor %}
</tbody>
</table>
styles.css
#media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
table, thead, tbody, th, td, tr {
display: block;
}
tr {
margin: 0 0 1rem 0;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
}
Here's a demo of the technique I typically use for responsive tables. It's written for mobile-first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table.responsive {
width: 100%;
max-width: 60em;
}
table.responsive thead {
display: none;
}
table.responsive tr {
display: block;
border-bottom: 1px solid #d0d0d0;
}
table.responsive td {
display: block;
padding: .75em .375em .75em 6.5em;
}
table.responsive td[data-header]:before {
content: attr(data-header) " ";
position: relative;
margin-left: -6.4em;
left: -.1em;
float: left;
padding-left: .375em;
max-width: 6em;
}
#media all and (min-width:360px) {
table.responsive td[data-header*="\20"]:before {
top: -1em;
}
}
#media all and (min-width:520px) {
table.responsive thead {
display: table-header-group;
}
.responsive>thead th {
text-align: left;
padding: .75em .375em;
}
table.responsive tr {
display: table-row;
border-bottom: 0 none;
}
table.responsive td {
display: table-cell;
padding: .75em .375em;
}
table.responsive td[data-header]:before {
display: none;
}
}
</style>
</head>
<body>
<table class="responsive">
<thead>
<tr>
<th>Title</th>
<th>Created</th>
<th>Last Accessed</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Title">Donna's Printing</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Test batch</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">For Mr. Baker</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
<tr>
<td data-header="Title">Endorsements</td>
<td data-header="Created">5/24/2017 <span class="time">12:33pm (EDT)</span></td>
<td data-header="Last Accessed">03/03/2019 <span class="time">12:33pm (EDT)</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Need to open a pop-up along with cell data from DB based on the type on on ag-grid table by using the survey tag id?
I can able to fetch the survey tag id
emoji = () =>{
isPopup()=true;
}
onCellClicked = event => {
console.log(event);
let tag = event.data.survey_tag_id;
console.log(tag);
const column = event.colDef;
if (column.headerName === "emoji" ){
this.emoji();
}else{
this.showNotification("clicked", "success");
}
console.log(
"onCellClicked: " + event.data.name + ", col " + event.colIndex
);
};
maybe this answer can help, but this applies in angular sorry if you can not translate it into the react
parent.html
<div >
<ag-grid-angular
style="width: 100%; height: 750px; border-radius: 5px; text-align: left;"
class="ag-theme-balham-dark"
[rowData]="rowData"
[columnDefs]="columnDefs"
[enableFilter]="true"
[enableSorting]="true"
[defaultColDef]="defaultColDef"
[rowSelection]="rowSelection"
[animateRows]="true"
[enableStatusBar]="true"
[enableColResize]="true"
[enableRangeSelection]="true"
[alwaysShowStatusBar]="false"
(gridReady)="onGridReady($event)"
(cellClicked)="onCellClicked($event)"
>
</ag-grid-angular>
</div>
parent.ts
graphAlarm(apn:any): void {
const dialogRef = this.dialog.open(graphAlarm, {
width: '1000px',
height: '700px',
data : apn,
});
dialogRef.afterClosed().subscribe(result => {
});
}
onCellClicked(event){
this.graphAlarm(event)
console.log('get dialog : ',event.data)
}
in this part pop up or dialog in angular material graphAlarm child/part from file parent
graphAlarm.ts
#Component({
selector: 'graph-alarm',
templateUrl: '
<div>
<div class="row">
<div class="row col-sm-8">
<div class="col">
{{name.kpi}}
</div>
<div class="col">
<mat-icon>help</mat-icon>
</button>
</div>
</div>
<div class="col-sm-4">
<button style="border-radius: 10px; background-color: #044c94;color: white" (click)="sendChangeThreshold()">
save
</button>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="border-radius: 10px;">
<div class="row" style="font-size: 12px; ">
<table id="table" mat-table [dataSource]="dataSource.nameKPI" class="mat-elevation-z8"
style="width: 100%; background-color: #230162; color: white;">
<!-- Position Column -->
<ng-container matColumnDef="header">
<th mat-header-cell *matHeaderCellDef style="color: white;"> KPI</th>
<td mat-cell *matCellDef="let element" style="color: white;"> {{element.header}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="threshold_up">
<th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Up | 4G</th>
<td mat-cell *matCellDef="let element">
<input *ngIf="element.threshold_up && element.header != 'Throughput'"
(change)="save(element.header,'up',thresholdUp.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up}}" #thresholdUp>
<input *ngIf="element.threshold_up && element.header == 'Throughput'"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up}}" disabled>
<input *ngIf="element.threshold_up_4g"
(change)="save(element.header,'4g up',thresholdUp4G.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_up_4g}}" #thresholdUp4G>
<!-- (input)="onSearchChange($event.target.value)">-->
</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="threshold_down">
<th mat-header-cell *matHeaderCellDef style="color: white; text-align: center;"> Threshold Down | 4G</th>
<td mat-cell *matCellDef="let element">
<input *ngIf="element.threshold_down && element.header != 'Throughput'"
(change)="save(element.header,'low',thresholdDown.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down}}" #thresholdDown>
<!-- (input)="onSearchChange($event.target.value)">-->
<input *ngIf="element.threshold_down && element.header == 'Throughput'"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down}}" disabled>
<input *ngIf="element.threshold_down_4g"
(change)="save(element.header,'4g low',threshold4GDown.value)"
style="width: 150px; border-radius: 15px; text-align: center; background-color: #230162; color: white;"
ngModel="{{element.threshold_down_4g}}" #threshold4GDown>
<!-- (input)="onSearchChange($event.target.value)">-->
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</div>
<div class="col-sm-4" style="border-radius: 10px; padding-top: 15px; text-align: center;">
<div class="box_down">
<div class="material-icons" style="font-size: 100px;">note_add</div>
<input style="padding-bottom: 10px;font-size: 10px;" type="file" (change)="fileChange($event)"
placeholder="Upload file" accept=".pdf,.doc,.docx">
<div class="listFile">
list file
</div>
</div>
<br>
<div class="box_down1">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Alarm Triggered</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck1">Telegram Bot Alarm</label>
</div>
</div>
</div>
</div>
</div>
',
styleUrls: ['graph-alarm.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition(
'expanded <=> collapsed',
animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
)
])
]
})
export class graphAlarm implements OnInit {
constructor(
public apn_service: ApnDashboardService,
private _snackBar: MatSnackBar,
public dialogRef: MatDialogRef<graphAlarm>,
#Inject(MAT_DIALOG_DATA) public selected_apn: any,
) {
console.log('anu tour', selected_apn.nameKPI);
this.dataSource = selected_apn;
this.kpi_threshold_up = selected_apn.threshold_up;
}
ngOnInit() {
}
onNoClick(): void {
this.dialogRef.close();
}
}
I am having following problem. I have a table which contains a dropdown in each row corresponsing to first column element of that particular row. But when i try to select an element from a particular dropdown, i am getting element not visible exception.
Here is the page structure :-
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabPopup::content" style="top:auto;right:auto;left:auto;bottom:auto;width:auto;height:auto;position:relative;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog" class="x1c9">
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<table class="x1cg" border="0" cellspacing="0" cellpadding="0" summary="" data-afr-shaddec="sd$1">
<tbody>
<tr>
<tr>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_cse" class="p_AFResizable x1ct"/>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::contentContainer" class="p_AFResizable x1o" tabindex="-1">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_ccntr" class="x1cr" style="width:800px;height:450px;position:relative;overflow:auto;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabpgl1" class="x1a">
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pgl108" class="x1a" style="margin-left:15px; width:auto;min-height:500px;/*width:750px;height:500px*/">
<div>
<div>
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2" class="xpq" style="margin-left:15px; width:auto;min-height:450px; /*width:720px;height:450px*/">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2::f" class="xrd" style="left:0px;top:0px;height:181px;right:0px;padding:0px;border-width:0px">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pglks4" class="x1a" style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px">
<div>
<table id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:j_id__ctru13pc10" class="xsk x1a" border="0" cellspacing="0" cellpadding="0" summary="">
<tbody>
<tr>
<td>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78" class="xsk xdn" style="height:165px">
<table class="xu2 p_AFCore p_AFDefault" border="0" width="0" cellspacing="0" cellpadding="0" summary="">
<div class="x1fp p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78::content" class="x5s p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable" class="xsk xsw" _leafcolclientids="['dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru16pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru18pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru21pc10']" style="height:114px" tabindex="0">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::ch" class="x143" _afrcolcount="3" style="overflow: hidden; position: relative; width: 441px; border-right-width: 0px;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::db" class="x13v" _afrcolcount="3" style="position: relative; width: 441px; overflow: hidden; height: 85px; z-index: 1;">
<table class="x13w x14n" cellspacing="0" _startrow="0" _rowcount="10" _selstate="{'3':true,'2':true,'1':true,'0':true,'7':true,'6':true,'5':true,'4':true,'9':true,'8':true,'afrSelectAll':true}" _totalwidth="363" style="table-layout: fixed; position: relative; width: 441px;">
<tbody>
<tr class="x13u " _afrrk="0">
<tr class="p_AFFocused p_AFSelected x13u " _afrrk="1">
<td class="x14j" align="center" nowrap="" style="">
<td class="x14j" align="center" nowrap="">
<span id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:1:j_id__ctru19pc10" class="p_AFFocusTarget p_AFHoverTarget x1z">
The last dropdown is the is the item from where i am trying to select an option but getting this exception .
And below is the code that i used to find it.
WebElement we = driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']"));
scrollIntoView(we);
Select select = new Select(driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']/../..//select")));
select.selectByVisibleText(newActivity);
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="DataTables_Table_4" class="dataTable no-footer" role="grid" aria-describedby="DataTables_Table_4_info" style="width: 100%;">
<thead>
<tbody>
<tr class="odd" role="row">
<tr class="even" role="row">
<td class="center-col multiRowSelect sorting_1">
<td>GROUP4</td>
<td class=" center-col">Enterprise Open</td>
<td class=" center-col">0</td>
</tr>
</tbody>
</table>
</div>
Are you absolutely sure you don't like xpath for that? It is awfully powerful and can in fact very well be used to find by text:
Click Element xpath=//*[contains(text(),"GROUP")]/parent::tr
I am doing responsive mail and I need to make responsive td in table (without class or using media-query).
Simply - I need on small devices rank the td under them.
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;">
<tr>
<td><img src="pic" /></td>
<td><a href="https://blahblah2.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
</tr>
</table>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases.
As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
background-color: #fff; max-width: 600px;">
<tr>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
</tr>
</table>
Fiddle here
You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.
#media only screen and (min-width: 0px) and (max-width: 700px) {
td {
display:inline-block;
padding:5px;
width:100%;
}
}