Is there a way in polymer to create a component and NOT use the Shadow DOM?
I want the component in the Normal DOM, thus affected by all css like this:
<my-component>
<p>Some text</p>
</my-component>
And NOT have it put its content in the Shadow DOM like this:
<my-component>
#shadow-root
<p>Some text</p>
</my-component>
Related
If class 'hello' visible then apply some css to 'banner2' class. is it possible? Looking for CSS solution not Javascript.
<div id="banner">
<div class="hello"></div>
</div>
<div class="banner2">
</div>
It's not possible to select a div based on visibility in CSS alone. You can easily use jQuery / JS, but since you don't want that I'd suggest trying out some trickery with CSS combinators and the checkbox hack, depending on how you are planning on changing the visibility of "hello".
The option doesn't exist yet in CSS.
When Selectors 4 will be available you could do it this way:
.banner:has(> .hello) + .banner2
But as of this moment, you can only do it with javascript
I'm trying to use popover for certain parts of paragraphs that I'm fetching from my DB and using ng-repeat I load to my html and serve to the front-end.
The relevant part of my DOM, looks like this
<div ng-repeat="i in comments" class="ng-scope">
<div popover="test2" class="task ng-binding"> text1
<span popover="test" class="highlight-a">text2</span>
</div>
</div>
the ... is injected into the DOM from after some process in the back-end, so the basically the DOM is modified after it loads and renders.
At this point, clicking on the won't trigger any popovers.
I'm wondering if there's a work-around for re-initiating the popovers or anything like that. Even when I call on to load the popover in the end of the process it doesn't work.
New to react and I'm wondering if there is any work around to get past this error:
_registerComponent(...): Target container is not a DOM element.
EDIT What I'm trying to do is:
I have a react function like:
ReactDOM.render(React.createElement(someFunction,{data:someData}),document.getElementById('someID')
which generates a dom like :
<span>
<ul data-reactid='...'>blahhh</ul>
<div data-reactid='...'>
<div id='some-id1' data-reactid='...'>blahhh</div>
<div id='some-id2'data-reactid='...'>blahhhh</div>
</div>
</span>
Now on the very next line to the previous react call, I have other function which is trying to do stuff with the above created div:
ReactDOM.render(React.createElement(someOtherReactFunction, { somePram: 'ImParam'}), document.getElementById('some-id1'));
This gives me:
_registerComponent(...): Target container is not a DOM element.
But I can see it's present in the DOM
So how do I access this virtual dom div? and load some contents in it?
P.S: I know a way with dangerouslySetInnerHtml but looking for a more better approach
it's just javascript. Yes you can create div. You have to register on some dom element only once to load up all app. You should avoid touching DOM after load of React app, because React does it in very efficient way, but it doesn't mean that it's not possible to touch it. And before loading React app, if you have to check if app container is there, you may do it with such code:
if (!document.getElementById("app")) {
var div = document.createElement("div");
div.id = 'app';
document.body.appendChild(div);
}
ReactDOM.render(<App />, document.getElementById('app'));
I have been using uibinder for a while and got pretty good at it. I know all about the use of HTMLPanel and Anchor for adding click handlers. However, there are cases where this design approach simply doesn't fit the bill.
say I have a unordered list, and each list has some anchor elements.
<ul><li><a ...></li>...</ul>
it is good to make each li as a component (java class) so you can add multiple instances of the component inside the ul. this means inside the ui.xml, you start with li (no other way that I can see). but then there is no way to insert Anchor inside. you can not replace li with HTMLPanel since that would create a div which you don't want.
by leave the anchor as a in this uibinder, there would be no way to detect the anchor click event.
any ideas?
In your HTML, set ID to the anchor :
<a id='testachor'>...</a>
In your GWT code, wrap the anchor into a widget:
Anchor testAnchor = Anchor.wrap(Document.getElementById('testanchor'));
Then add click handler to it:
testAnchor.addDomHandler(new ClickHandler(){...}, ClickEvent.getType());
You can add Anchor widget inside <li> tag:
<g:HTMLPanel>
<ul>
<li>
<g:Anchor ui:field="link" />
</li>
</ul>
</g:HTMLPanel>
I need to allow add a div with a class attribute in tinyMCE in Umbraco. I can add a div, but all content in the div is just text. I need that text has a paragraph, and finally add a class attribute for the div.
It's a little hard to understand what you are asking, but I think this should help.
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
You can basically associate a stylesheet with the tinyMCE and then add styles to it that will appear in the style dropdown
You may use
tinymce.activeEditor.execCommand('insertHTML', false, '<div class="section'></div>');
This will insert the specified html into the editor at the local caret position.
Be aware that your valid_elements and valid_children configuration settings won't strip out anything from the html that you insert.
If you can paste your template code then we can be more of a help to you.
What you want to do is wrap your <umbraco:Item field="aliasOfYourRTE" runat="server" />
with the div you want so in your case your code will look like this:
<div class="YOURCLASSNAMEHERE">
<umbraco:Item field="bodyText" runat="server" />
</div>
The umbraco RTE automatically spits out <p> </p> tags when content is inserted. Also, make sure you are publishing your node so that your content is viewable on the front end.
Hope this helps.
Go to Settings - Styles.
Open the stylesheet with the styles for the Format dropdown of TinyMCE in Data Type Richtexteditor.
Add a style with the Alias div.class, e.g. div.alert alert-danger.
If you then click in TinyMCE on a paragraph and then choose in the Format dropdown this style the paragraph is formatted as follows:
<div class="alert alert-danger"> ... </div>
Is this what you wished to do?