I have a string HTML code like
<table id='topInfoBar' style=" width: 100%;" cellspacing='0' border='0'>
<Tr>
<td id='lockOrder' clientidmode='static' style="text-align:Right;color:black;font-weight:bold">
<img src='.../images/locked.gif' alt='This order is locked' title='This order is locked!' />
</td>
</Tr>
</table>
I want to check if id 'lockOrder' exists in the string and if yes, want to replace img node i.e
<img src='.../images/locked.gif' alt='This order is locked' title='This order is locked!' />
with
<i class="fa fa-search fa-2x cursorpointer" title="This order is locked"></i>
want to do it in c#.
Use property Visible and change it in if
HTML
<table id='topInfoBar' style="width: 100%;" cellspacing='0' border='0'>
<Tr>
<td id='lockOrder' clientidmode='static' style="text-align: Right; color: black; font-weight: bold">
<img src='.../images/locked.gif' alt='This order is locked' title='This order is locked!' runat="server" id="img"/>
<i class="fa fa-search fa-2x cursorpointer" title="This order is locked" runat="server" id="i" Visible="False"></i>
</td>
</Tr>
</table>
CodeBehind C#
if (true)
{
img.Visible = false;
i.Visible = true;
}
Related
My tbody of table is not as per thead of table.
table {
width: 100%;
}
tbody {
display: block;
max-height: 160px;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="myHeader" class="scroll table table-striped table-hover table-bordered table-responsive">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="mobiile">Document</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
[userName]
</td>
<td>
[userProfession]
</td>
<td class="mobiile"><iframe id="myHeader" src="https://i.stack.imgur.com/Pnq8a.jpg" width="250px" height="250px"></iframe></td>
<td>
<div class="dropdown">
<button class="dropbtn">Action</button>
<div class="dropdown-content">
<a class="btn btn-primary" href="user_images/['userPic']"><span class="glyphicon glyphicon-eye-open"></span> View</a>
<p id="i['userID']" style="display: none;">
['userPic']
</p>
<button onclick="copyToClipboard('#i['userID']')" class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Share</button>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
$("<div class='alert alert-success'>Copied url of image: <font color='blue'>[userName]</font>! </div>").insertBefore('#cr').delay(3000).fadeOut();
}
</script>
<a class="btn btn-success" href="user_images/['userPic']" title="Download [userName]" download><span class="glyphicon glyphicon-download"></span> Download</a>
<a class="btn btn-info" href="editform.php?edit_id=['userID']" title="click for edit"><span class="glyphicon glyphicon-edit"></span> Edit</a>
<a class="btn btn-danger" href="?delete_id=['userID']" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I want to remove the default styling from the a tag.
What I am trying to achieve is, to place the a tag and other things in one line only. But, the default a tag styling is not allowing me.
Here's the code:
<table style="background: #DEE3E0" class="table table-responsive table-condensed">
<thead>
<tr style="padding: 0">
<th class="text-center" style="font-size: 12px; padding: 0">Name & Qty</th>
<th class="text-center" style="font-size: 12px; width: 50px;padding: 0">Rate</th>
<th class="text-center" style="font-size: 12px; width: 50px;padding: 0">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px">
<img src="//placehold.it/45" alt="Product Image" />
1x <a href="" style="margin: 0; padding: 0">
Product Name
</a>
<a href="javascript:void(0)" title="Remove">
<span class="pull-right text-danger">
<i class="fa fa-trash fa-lg"></i>
</span>
</a>
</td>
<td class="text-right" style="padding-top: 7.5px; font-size: 12px">150.00</td>
<td class="text-right" style="padding-top: 7.5px; font-size: 12px">150.00</td>
</tr>
<!-- and other rows... -->
</tbody>
<tfoot>
<tr>
<td colspan="2" style="font-size: 12px; font-weight: bold" class="text-right">Sub Total</td>
<td class="text-right" style="font-size: 12px; font-weight: bold">425.00</td>
</tr>
<tr>
<td colspan="2" style="font-size: 12px" class="text-right">Taxes</td>
<td style="font-size: 12px" class="text-right">50.00</td>
</tr>
<tr>
<td style="font-size: 12px" colspan="2" class="text-right">Shipping</td>
<td style="font-size: 12px" class="text-right">100.00</td>
</tr>
<tr>
<td style="font-size: 12px; font-weight: bold" colspan="2" class="text-right">Grand Total</td>
<td style="font-size: 12px; font-weight: bold" class="text-right">575.00</td>
</tr>
<tr>
<td colspan="3"> View Cart
Checkout
</td>
</tr>
</tfoot>
</table>
Here's the complete fiddle: http://jsfiddle.net/j4o8tff5/
1x is the quantity. I want that Product Name should be placed next to the quantity itself. And hence I am trying to remove the default styling.
I have searched a lot, but could not find the solution.
Kindly help me out. Thanks.
Wrap your quantity text in span tag, Demo
<span>1x</span>
Instead of trying to find out the default styling, better you use some styling to achieve your target. simply use -
a{ position: relative; top: -12px; }
this will solve your problem.
I am trying to add a scroll bar on my table but its not showing up on the table. I have tried to put my table in div as well. Here is my code:
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
I have tried to put overflow property in CSS
You need to do two things. First, you have to wrap your table in a container that will do the scrolling, like this:
<div style="height: 200px; overflow: auto;">
<table>
...
</table>
</div>
And you have to remove position: absolute from the style of the table.
Here's an example: http://jsfiddle.net/qbkfbrwd/
Hope that helps!
Edit If instead you only want the body of the table to be able to scroll, it's as simple as adding the following CSS:
tbody {
display: block;
height: 200px; //or whatever you want the height to be
overflow: auto;
}
Example: http://jsfiddle.net/f91pzj6d/
Create a div with:
<div id="myTable">
and in css:
myTable {
overflow:auto;
}
I add a div as container and use overflow: auto. You have also to set a height for your table:
#tableContainer {
overflow: auto;
height: 200px;
position: relative;
width: 300px;
}
<div id="tableContainer">
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where
<br/>duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches
<br/>for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
</div>
I'm having what seems to be a basic CSS issue.
I have a table within a table, and the imbedded table is there to contain a sliced image to support a rollover graphic change.
The second row of the imbedded table is getting a space between the first row and itself.
Here is the HTML Markup:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="appResourceHead text14px textBold">Parametric Search</th>
</tr>
<tr>
<td class="appResourceBodyNoPad text12px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_01.png" width="163" height="132" style="border-style: none;" />
</a>
</td>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_02.png" width="67" height="132" style="border-style: none;" />
</a>
</td>
</tr>
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_03.png" width="163" height="48" style="border-style: none;" />
</a>
</td>
<td><a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="/centralSemi/images/Parametric_Search_04.png" rel="/centralSemi/images/Parametric_Search_Down_04.png" class="rollover" width="67" height="48" style="border-style: none;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following jsfiddle to show you my markup in action.
http://jsfiddle.net/5bZtz/
When looking at the table in Firefox and Chrome I don’t have the space, but in IE the space is shown like you can see in the jsfiddle example.
Simple add below code in your css,
td {
line-height:0;
}
I update your fiddle here. Kindly see it works ! http://jsfiddle.net/5bZtz/1/
Good Luck ..)
Add to <img ... /> css properties: display:block; and height:132px;
I'm trying to create a dynamic xpath or css locator to locate, edit and delete images that are first column of matrix table that contains account information. Each account is distinct by email id, such as johng#teat.com in following html code.
What I'm looking for is how to write xpath/css locator that allows us to click on edit and delete icon/link based on known account email id.
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>John</td><td>Ghoper</td><td>johng#test.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test.com</td><td>never</td>
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>Chris</td><td>Phela</td><td>kphela#test1.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test1.com</td><td>never</td>
<td nowrap="nowrap"><img src="sourcelocation/delete.png" alt="remove" style="border: 0px;"> <img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;"></td><td>John</td><td>Ghoper</td><td>Pattyg#test2.com</td><td></td><td style="white-space: normal">Reports Viewer</td><td style="white-space: normal">test2.com</td><td>never</td>
I slightly modified the xml to make it well-formed. Here is the sample on which my answer is based on.
<root>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',528); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(528);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>John</td>
<td>Ghoper</td>
<td>johng#test.com</td>
<td></td>
<td style="white-space: normal">Reports Viewer</td>
<td style="white-space: normal">test.com</td>
<td>never</td>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',302); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(302);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>Chris</td>
<td>Phela</td>
<td>kphela#test1.com</td>
<td></td>
<td style="white-space: normal">Reports Viewer</td>
<td style="white-space: normal">test1.com</td>
<td>never</td>
<td nowrap="nowrap">
<a href="#" onclick="$('table.jsonTable').matrix('remove',528); return false;"
title="remove">
<img src="sourcelocation/delete.png" alt="remove" style="border: 0px;" />
</a>
<a href="#" onclick="return heClick(890);">
<img src="sourcelocation/apedit.png" alt="view/edit" style="border: 0px;" />
</a>
</td>
<td>John</td>
<td>Ghoper</td>
<td>Pattyg#test2.com</td>
<td></td>
Now to select delete link based on known email id you can write //td[text()='johng#test.com']/preceding-sibling::td/a[#title='remove']
To select edit icon based on known email id you can write //td[text()='johng#test.com']/preceding-sibling::td/a/img[contains(#alt,'edit')]
Hope this helps.