How do I add an attribute to an iframe created in Ext Js 7.5.1? I have an iframe component and would like to add the attribute allow="geolocation *" to the iframe element.
Using the autoEl configuration mentioned here adds the attribute to the wrapping <div> not the <iframe> itself, which doesn't provide the desired behavior. Adding it after render also mentioned here does not appear to provide the desired behavior. I'm not exactly sure why, my guess is because it is added after the component is rendered, not "in" the component as it is being rendered, although I may be wrong on this.
Related
I have a v0/Polymer 1 web component that I am upgrading to v1/Polymer 2. This web component dynamically builds a URI that loads an external JavaScript file. The external JavaScript file runs and loads an <iframe> into a <div> of my component. This external JS contains document.getElementById to load the <iframe> into the specified <div>.
I have searched and haven't found a way to force the <div> element to be exposed/placed in the shady DOM. I have read that if I design the component without a shadow DOM nothing will be displayed.
Is there anyway I can update this to web components v1/Polymer 2 with the external script (third party) still using document.getElementbyId to modify a <div> inside the web component?
UPDATE
I have found that I can force webcomponents to use the shadow dom using <script>window.ShadyDOM = { force: true };</script> or <script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script> however I still cannot access the element by ID and I do not want to force all other webcomponents to use the shady DOM. Still looking for possibilities.
What I had to do was put a <slot></slot> inside my Web Components template. When I declare the custom element, I have to nest a <div> inside of it like so: <custom-element><div></div></custom-element> which I am doing using this.appendChild() where this is the custom element. The <div> inside my element can now be accessed by document.getElementById() once it is assigned an id attribute.
As you can see here, I have set up an addon to replace some contents of the network-inspect-popup with pretty-printed values. The odd thing is, I'm setting background of both the iframe and the inner document (background;#FFF), but it still shows the bluish background of the net-inspector. What's wrong with this, and why does DOM Inspector addon not even let me inspect to see what's wrong here?
Your own code overrides your own style. You have:
netPanel.iframe.addEventListener('load',function(event) {
var doc = event.originalTarget;
doc.body.style.backgroundColor='rgb(85,87,128)';
// ...
}, true);
This event listener will be called for all load events bubbling in the netPanel.iframe DOM, and that includes the load event the iframe document you insert creates. Change your code to first check the load is actually coming from a document you want to "overlay".
PS: You can actually use the DOM Inspector. But note that the "window" is not actually a window, but a <panel> in under the browser.xul top-level DOM.
I need to change the title of a grid header, and add a custom component to it. I use a .properties file to set the title, and this template code to add the custom component:
<table class="table table-striped" t:type="grid" t:source="data" t:rowsPerPage="50" t:pagerPosition="bottom">
<p:specialHeader>
<t:tooltip tip="tipData"></t:tooltip>
</p:specialHeader>
</table>
When viewing the grid in a browser, the component appears but there is no title.
If I set a title in the template, like so, then it loses the sort functionality:
<p:specialHeader>Title
<t:tooltip tip="tipData"></t:tooltip>
</p:specialHeader>
How can I get the title, sort and custom component to appear?
As I said here you can't combine the default header block and your own custom header block, it's either one or the other.
I think you're best bet is a mixin. Take a look at Taha's blog post here where he creates a HelpText mixin which applies to a Label component. His mixin looks at the message catalog for a "propertyName-help" entry and adds a "title" attribute to the DOM. The blog post takes it one step further and uses a ComponentClassTransformWorker2 to atach the HelpText mixin to every label (even the ones inside the BeanEditor component).
You could do the same thing but you would create a mixin for either Grid or GridColumns (Grid delegates to GridColumns to draw the headers). If you'd like some examples of Grid mixins, take a look at my tapestry-stitch demo's here and here.
So, you won't be reusing the tooltip component, you will be copying the behaviour. This will most likely involve adding a "data-tooltip" attribute to the th DOM elements serverside. You can then fire some javascript on the client to find all elements with a "data-tooltip" attribute and do some UI magic.
I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.
I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});