We can render divs, ps and other elements as CSS `::after`` elements.
However, do styled-components somehow allow to render components in ::after?
Related
I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.
I tried liferay-hook.xml:
<custom-jsp-dir>/WEB-INF/custom_jsps</custom-jsp-dir>
<custom-jsp-global>true</custom-jsp-global>
and create file on /WEB-INF/jsp/html/common/themes/top_js-ext.jspf and put all my <link href="" rel="stylesheet" type="text/css"> there. but it will applied to all pages on my page. I want to know on how to apply global styling on selected portlet on liferay. Thanks.
The best way to introduce global CSS styles is through your theme, not through a JSP override. Create a theme that contains the CSS you'd like to use. This way, Liferay will include your CSS in the minified version, compact all files to be downloaded in just a single request. Plus, your changes are probably relevant for a specific theme anyways.
Use your browser's DOM inspection tools to analyse the CSS selector you need. Each portlet declares specific classes that you can easily address. e.g.
.portlet-navigation {
background-color: red;
}
Why are custom elements in SVG invisible?
Composing Svg with Aurelia is similar to composing html. You have to make sure though that any custom elements are implemented containerless (either by decorating the ViewModel with the `#containerless' attribute or adding an attribute 'containerless' to the custom element tag. SVG is picky about elements that are not defined in the specification and attributes that have the wrong value type.
Even if you have taken care of making them containerless it is still possible the custom elements do not show, even though they are added to the DOM.
Checkout this GistRun. You would expect two white rectangles, that are present in the DOM, above the other elements. But they are not visible.
The reason the elements do not show is because of the comments Aurelia uses to track element positions (<!--<view>-->). You can avoid this issue by wrapping your elements in a SVG tag:
<template>
<svg>
...
</svg>
</template>
See this Gistrun for a working result.
Edit: Be sure to add an attribute overflow="visible" if you dont want the inner elements to be clipped by the SVG element:
<template>
<svg overflow="visible">
...
</svg>
</template>
More info in the Aurelia cheat sheet :
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9
In the markup,
<html>
<svg>
<g>Test</g>
<g id="existing-g"></g>
<svg>
</html>
In JavaScript:
React.render(<text>Something</text>, document.getElementById('existing-g'));
React renders SVG elements well within an HTML element container on all the browsers
But, In Safari, React doesn't render SVG within SVG element container. Though it works well in Firefox and Chrome.
May be Safari doesn't support some of the APIs on SVG DOM Node to append elements?
React uses innerHTML attribute when mounting components. innerHTML attribute isn't available on SVG elements by default in many browsers.
I used this polyfill https://code.google.com/p/innersvg/ which adds the innerHTML attribute on SVG elements. It solved the problem.
Follow-up to How to embed SVG graphics properly in JSF application using OmniFaces
I'm using the OmniFaces 2.1 snapshot in order to output SVG files from byte[] arrays. I need to suffix #a on SVG URL's in order to activate a CSS style inside the SVG.
Example img:
<img src="/web/javax.faces.resource/ApplicationBean_getImageById_svg.xhtml?ln=omnifaces.graphic&v=0&p=106.1%23a">
As you can see, my #a is appended at the right side of the URL as %23a.
If this had been a regular URL it would be
<img src="106.1.svg#a" />
It would then pick the CSS style and, in my case, paint the background of this sign yellow.
I'm really hoping BalusC comes to my rescue here. Heh. :)
As per this commit, the <o:graphicImage> got a new fragment attribute. This should enable you to pass SVG view modes via URL fragment identifier. It's available in today's 2.1 SNAPSHOT.
E.g.
<o:graphicImage value="#{bean.svg(imageId)}"
type="svg" fragment="svgView(viewBox(0,200,1000,1000))" />