I have created a polymer element which has a nested template. I want to access properties of parent template in the child template.
<dom-module id="gallery-content">
<template>
<template is="dom-bind">
<iron-ajax url="/getData" last-response={{data}} auto></iron-ajax>
<table id="table-stencils">
<tr>
<td>
<p>{{contentType}}</p>
<hr>
</td>
</tr>
<tr>
<td>
<image-block description={{data.description}}
lastmodified={{data.lastModified}}
imagepath="../../images/11.jpg"></image-block>
</td>
<td>
<image-block description={{data.description}}
lastmodified={{data.lastModified}}
imagepath="../../images/12.jpg"></image-block>
</td>
<td>
<image-block description={{data.description}}
lastmodified={{data.lastModified}}
imagepath="../../images/13.jpg"></image-block>
</td>
<td>
<image-block description={{data.description}}
lastmodified={{data.lastModified}}
imagepath="../../images/14.jpg"></image-block>
</td>
</tr>
</table>
</template>
</template>
<script>
Polymer({
is: "gallery-content",
properties:{
contentType: {
type:String,
value:"Others"
}
}
});
</script>
I am not able to access contentType property of the parent element.
I am using another polyment() inside this gallery-content element.
Here is a running plunkr of your element without dom-bind. Please note i've used a json as getData service and a temporary element for image-block
Related
When I use Handlebar to go through a large list with #each, it automatically makes a new page if it doesn't fit for all the entries on one page. On the new page it has no space to the margin and looks unattractive. How can I set the distance from the margin?
This is my code:
<table>
<thead>
<tr>
<th></th>
<th>{{Person.Known}}</th>
<th>{{Person.Unknown}}</th>
</tr>
</thead>
<tbody>
{{#each OriginalDocuments.Documents }}
<tr>
<td>{{this.Name}} - {{#index}}</td>
<td>
{{#if this.Known}}
<div>
<img src="person_checkmark_Known.svg"/>
</div>
{{/if}}
</td>
<td>
{{#if this.Unknown}}
<div>
<img src="person_checkmark_Unknown.svg"/>
</div>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
You can simply add this to the style section of your handlebars template:
#page {
margin: 10px 0;
}
The above will add 10px of margin to the top and bottom of each page that ends up being generated. You can style as you see fit by using #page, and that will be applied to each page.
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>
I am using native HTML5 drag and drop to drop some part of HTML into contenteditable element (contenteditable="true")..
problem is next:
some css styles are removed when item is dropped. It looks like some optimization is happened, for example if we have element with color:red and we drop it into droppable area this css property is removed because some of his parents have this same property and value..
for example:
$(function () {
$('.draggablePlaceholder').attr("contenteditable", false);
$('.draggablePlaceholder').off('dragstart').on('dragstart', function (e) {
var dataToSend = $(e.target).attr("data-value");
e.originalEvent.dataTransfer.setData($(e.target).attr("data-value-type"), $(e.target).attr("data-value"))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td style="color: red;" contenteditable="true">
drop here...
</td>
</tr>
</table>
<span class="draggablePlaceholder" draggable="true" contenteditable="false"
data-value="<table>
<tbody><tr>
<td style=" color:red; font-size:19px; ">SOME TEXT</td>
</tr>
</tbody></table>" data-value-type="text/html">
ITEM FOR DRAG
</span>
when you try to move "SOME TEXT" into droppable area the result is:
1 css property: font-size:19px;
instead of 2 css properties: color:red; font-size:19px;
so color:red is removed
is there way to skip this "optimization", so original code is copied?
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.
Everybody knows how a dropdown menu works where a person clicks on the drop down menu and it displays a drop down list where the user can select an option from the list. What I want to know is that is there a way in html where except displaying a dropdown list can I display a grid instead with the options in the grid? I havn't got any code for this but if anyone knows this is possible and can provide an example of this I would be very greatful and it would be very helpful.
Here's a basic example:
http://jsfiddle.net/QmLmC/
<!-- HTML -->
<div id="myDropdownGrid" class="dropdownGrid">
<div>
<button type="button">Open/Close</button>
</div>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<p>Click the button above to view open or close the grid.</p>
.
/* CSS */
.dropdownGrid{position:relative;}
.dropdownGrid table{position:absolute; z-index:999; display:none;}
.dropdownGrid td{width:20px; height:20px; background-color:white;}
.dropdownGrid td:hover{background-color:blue;}
.
// Javascript using jQuery
$("#myDropdownGrid button").click( function(){
$('#myDropdownGrid table').toggle();
});
... well, there's no such thing as a 'grid' but a table would present the info in 'grid' form. You could build a grid out of div elements, but that can get unduly tedious.
Feel like using jQuery for this?
/* make button clickable */
$("#someButton").click( function(){
/* grid like container of data, talbe or a complex div 'structure' */
$("#someGrid").toggle() // if grid is visible hide it, if hidden show it
})
... so you'd have a button with an id of "someButton" and whatever grid structure/wrapper with id id of "someGrid" and css of "display:none" on it.