I want to add style width, height, and colour in input tag.
<table>
<td *ngFor="let y of x" >
<input type="{{y.cellNumber}}" src="{{y.src}}" value="{{y.name}}" height="{{y.height*2}}" width="{{y.width/2}}" style="height:{{y.height}}px;width:{{y.width}}px">
</td>
</table>
But inside the style am unable to set object value. Is there any other way to set object value inside the style within input tag.
You can use it like this:
<table>
<td *ngFor="let y of x" >
<input
type="{{y.cellNumber}}"
[src=]"y.src"
[value]="y.name"
[style.height.px]="y.height/2"
[style.width.px]="y.width/2" >
</td>
</table>
Another approach would be to use ngStyle, like this:
<table>
<td *ngFor="let y of x" >
<input
type="{{y.cellNumber}}"
[src=]"y.src"
[value]="y.name"
[ngStyle]="getStyle(y)">
</td>
</table>
getSyle({ width, height }) {
return {
width: `${width/2}px`,
height: `${height/2}px`,
};
}
You can use NgStyle:
<table>
<td *ngFor="let y of x" >
<input [type]="y.cellNumber" [src]="y.src"
[value]="y.name" [height]="y.height*2" [width]="y.width/2"
[ngStyle]="{ 'height.px':y.height, 'width.px': y.width}">
</td>
</table>
Related
I have an html like below
<div class="DGClass">
<div>
<div>
<table>
<tr>
<td>aasf</td>
<td>asf</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asf</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asf</td>
</tr>
</table>
</div>
</div>
</div>
I Change second row's, second column's background. This is my css code
.DGClass * tr:nth-child(2) > td:nth-child(2) {
background-color: red !important ;
}
But I want to change cells background color by parameter in TypeScript. How can I do that?
If dom already rendered, u can select nodes with browser DOM API and set attribute directry
const DesiredColor = "red";
const Elements = document.querySelectorAll(".DGClass * tr:nth-child(2) > td:nth-child(2)");
[...Elements].map( Element => Element.style.backgroundColor = `${DesiredColor} !important` );
If you white code in some declarative way, you can use JSS, or any of another styling library.
Please help me
if i found div class="visible" one then change all parent css style overflow : visible.
i need to change the 'td' ccs value oveerflow- hidden to overflow- visible .by using any way to solve this question please.
Like this:
<table>
<tr>
<td >
asdf
<table >
<tr>
<td >
sdf
<table>
<tr>
<td>Jill
<div class="visible1">Venkat overflow: visible;</div>
</td>
<td>
sdf
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
div visible1 > td
{
overflow: visible;
color: red;
}
You are doing it wrong check your css. It must be like this.
div.visible1{
overflow:visible;
color: red;
}
div.visible1 {
overflow: visible;
}
In css , a class selector is of the form .classname
Also, you must at least put the CSS inside some tags , if not in their own file altogether.
The structure is like this(taken from browser), it is dynamically generated in share point Mysite. I do not have control over HTML. I need to hide the whole tr using css. The catch is that there are numerous similar tr structure in the page but with different text in span.Please suggest a way to hide only the tr with text Social Notification Properties
<tr class = "ms-WPHeader">
<td colspan ="3">
<div class = "ms-WPTitle">
<span>
Text -Social Notification Properties
I have tried this so far but failed.
td[class ~="ms-WPHeader"]+tr+td+div+span[Text ~="Newsfeed"]
{
display:none;
}
and this
.ms-WPHeader ~ .ms-WPTitle.span[Text ~="Newsfeed"]
{
display:none;
}
using this hides all the span which is obvious
.ms-WPTitle span
{
display:none;
}
You can use :contains to neglect the inability of CSS to select text node.
Below there are two tables in which the second table text is visible.
$(".ms-WPHeader:contains('Text-Social Notification Properties')").css("display", "none");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="ms-WPHeader">
<td colspan="3">
<div class="ms-WPTitle">
<span>Text-Social Notification Properties</span>
</div>
</td>
</tr>
</table>
<table>
<tr class="ms-WPHeader">
<td colspan="3">
<div class="ms-WPTitle">
<span>I am visible though</span>
</div>
</td>
</tr>
</table>
You can't select elements with a specific text inside via CSS. What you can do though is to via jQuery look for that element and then add a class to it, so that you then can select it via CSS.
$("span:contains('Social Notification Properties')").addClass('hide');
And then in CSS
.hide{
display:none;
}
this is what i still suggest that you can use like this
$('table').addClass("hide_this_tr");
.hide_this_tr tr{
display : none;
}
<table>
<tr class="WPHeader">
<td colspan="3">
<div class="WPTitle">
<span>Text-Social Notification Properties</span>
</div>
</td>
</tr>
</table>
<table>
<tr class="WPHeader">
<td colspan="3">
<div class="WPTitle">
<span>I am visible though</span>
</div>
</td>
</tr>
</table>
As what i understand about what you want to achieve this is what my try is.
There's a specification for :contains('') pseudo-class, but I'm not able to make it work on any browser.
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors
But jQuery make this selector work as Gustaf said :
$("span:contains('Social Notification Properties')");
It's the only way to achieve this at the moment.
Without using jQuery, plain JavaScript using XPath (as mentioned in comments):
var snapshot = document.evaluate(
"//tr[contains(concat(' ', normalize-space(#class), ' '), ' ms-WPHeader ')][contains(.//span, 'saurus')]",
document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null
);
for (var i = 0; i < snapshot.snapshotLength; i++) {
snapshot.snapshotItem(i).classList.add("highlight");
}
.highlight {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<table>
<tr class = "ms-WPHeader">
<td colspan ="3">
<div class = "ms-WPTitle">
<span>
Irrelevant text
</span>
</div>
</td>
</tr>
<tr class = "ms-WPHeader">
<td colspan ="3">
<div class = "ms-WPTitle">
<span>
A wild stegosaurus appears!
</span>
</div>
</td>
</tr>
<tr class = "ms-WPHeader">
<td colspan ="3">
<div class = "ms-WPTitle">
<span>
More irrelevant text
</span>
</div>
</td>
</tr>
<tr class = "wrongClass">
<td colspan ="3">
<div class = "wrongClassTitle">
<span>
Brontosaurus in a wrong TR
</span>
</div>
</td>
</tr>
</table>
</body>
</html>
The XPath for "having a class", simple in CSS, is a bit of a pain in XPath; but it can be simplified quite a bit if you know the exact class attribute (i.e. "there will be no other classes but ms-WPHeader there"):
"//tr[#class='ms-WPHeader'][contains(.//span, 'saurus')]"
You can use :nth-child() if the structure of your page doesn't change :
To hide the 1st tr with the class ms-WPHeader (Be carreful: this will hide every 1st tr in each table):
table tr.ms-WPHeader:nth-child(1) {//hide the 1st tr in table
display: none;
}
JSFidlle: http://jsfiddle.net/ghorg12110/no891emk/
span is a webelement so you can select this using CSS Selector.
and then you can do WebElement.getText() to retrieve the text. No need to use xpath for this.
How can I hide a checkbox using HTML / CSS?
Let's say I have
<table>
<thead>
<th>
Col A
</th>
<th>
Col B
</th>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="hidden"> Some stuff </td>
</tr>
<tr>
<td> Some Other stuff </td>
</tr>
</tbody>
</table>
The name and the values of the checkbox are not constant. I know there's some way with jquery but is there a way to hide it with pure CSS or HTML?
Please keep in mind that setting the display property to none, makes the element inaccessible using tabs (see: Checkbox tab index not working when set to hidden with custom design). If you case about accessibility, you can use:
input[type=checkbox].hidden{
opacity: 0;
}
.hidden {
display: none;
}
This will hide the checkbox (or any HTML item with the class of "hidden") from display. The checkbox still exists in HTML and can be enabled/disabled with Javascript or by visitors with developer tools.
Simple enough!
input[type=checkbox].hidden{
display:none;
}
Or if you want to be crazy and use inline styles (best to avoid):
<input type="checkbox" class="hidden" name="V" value="B" style="display:none;">
you have class hidden added to that checkbox.
input[type=checkbox].hidden {
display:none;
}
or just
.hidden {
display:none;
}
.hidden{
display:none;
}
this will work.
I'm having a bit of a odd issue with my height of tables.
I have parent table (I know, I know tables... but I have no choice :( ) which has one row.. that contains 2 cells. each cell has a table of its own. The children tables have a border around them. I would like them both to stay the same height so that the borders align no matter how much content is in either. (they have flexible amounts of content so it cannot be set)
If you take the code below and dump it into a html file you will see (in Chrome at least) the right child table does not fill 100% of its cell that it is in. If you remove the "height:auto" on the parent table. then it does work but it also makes the parent table 100% height..
Why would these two things effect each other?
<style>
.cl2_h { background:red; }
.cl1_h { background:blue;}
.cl1, .cl2{ width:100%; border:1px solid black;}
table, tbody { height:100%; }
</style>
<table style="border:1px solid red;height:auto;">
<tbody>
<tr style="height:100%;">
<td style="width:50%">
<table class="cl2" style="text-align:left;">
<tbody>
<tr class="cl2_h">
<td>
RANDOM TEXT HERE
</td>
</tr>
<tr>
<td>
<span>Select which asd asdthis item relates to.</span>
<ul>
<li>
<select>
<option value="-1">Please Select...</option>
</select>
</li>
<li>
<select>
<option value="302">Please Select...</option>
</select>
</li>
</ul>
SOME RANDOM TEXT
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="cl2" style="height:100%">
<tbody>
<tr class="cl2_h">
<td>
asd asd asd asda sda(NTF)
</td>
</tr>
<tr>
<td>
DROPDOWNLIST Here
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Something of note is that if i set the parent to 200px then it continues to work... So I guess the real question is why doesn't it work when inside a parent table of "Auto" height
You can accomplish this using Javascript/jQuery:
var maxHeight;
$('.cl2').each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
}).height(maxHeight);
Steve, "height: auto" does not inform the browser in time for render what the final height of the containing table will be so the 100% on the child tables is syntactically superfluous.
Only if you give css with a specified height (or give no height) to the parent container will the children know what "100%" means at render.
If you MUST keep the height: auto on the parent table then #RobB has a good javascript solution, but I would recommend either setting a specific height for the parent table or not setting one at all if you can help it.