writing an app for opensocial brings up the following problem:
I create a dialog box (css is tundra)
myDialog = new dijit.Dialog({
title: "My Dialog",
content: "test content",
style: "width: 300px"
});
How can I change the properties "overflow" and /or "height" of the
"dijitDialogPaneContent"
contained in myDialog after creating this object?
Thank you
Subin
There are several approaches you can use, depending on how generic the solution should be.
Apply to all dialogs
If you want to apply the same style to all dialogs, you can "extend" a theme, for example, normally you would use the tundra theme like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="location/to/tundra.css" />
</head>
<body class="tundra">
<!-- Your content comes here -->
</body>
</html>
If you're going to apply it to all dialogs, you could do the following:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="location/to/tundra.css" />
<link rel="stylesheet" href="custom/style.css" />
</head>
<body class="tundra custom">
<!-- Your content comes here -->
</body>
</html>
And then write a custom stylesheet like this:
.custom .dijitDialogPaneContent {
overflow: hidden; /** Custom styles */
}
This will guarantee that it will override the general Tundra style for all dialogs. If you don't use a class like .custom, you cannot override the Tundra stylesheet because .tundra .dijitDialogPaneContent will be more specific (which means it has a higher priority).
Of course, you could write .tundra .dijitDialogPaneContent in your custom stylesheet as well.
Apply to a single dialog through stylesheet
If you want to apply it to a single dialog, then give an ID to the dialog, for example:
myDialog = new dijit.Dialog({
title: "My Dialog",
content: "test content",
style: "width: 300px",
id: "myDialogId"
});
Then you could write a stylesheet like this:
#myDialogId .dijitDialogPaneContent {
overflow: hidden; /** Custom styles */
}
Apply to a single dialog (using JavaScript)
Seperate stylesheets may improve readability because you seperate logic from design. If you don't need the seperate stylesheet you could do something like this:
require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
// Your code
query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});
This will use the domNode property of the dialog to query the content pane and then apply the style.
Apply to multiple dialogs
If you want to apply the same style to multiple dialogs (but not all dialogs), then your best approach would be to create a custom dialog by extending the default dialog. Considering the length of my answer atm I'm not going to explain that into detail, but I recommend reading guides about writing your own widget.
Related
I have various questions about the webfundamentals implementations, i have read that a true web component must have shadowDOM for css encapsulation, customElements for the logic of the component which i really love, and HTML Temapltes and import, so im trying to do it all in a customElement component and i have encounter with many and many issues that i find really hard to debug, i will enlist them all.
Does i have to insert html template into the document to actually get it? cant i get its content from js only? and in case i have to, when i intent to replace a shadowHost content hows is it works, i mean i got the template (the link) inside the shadowRoot, my actuall problem is that when i do querySelector(link[rel="import"]).import.querySelector("template") its null after the .import function tag and when i insert that function into the document, it actually gets the template content, heres the doc.
Watching that screenshot i got 2 more questions
Should i use shadowHost.innerHTML = file.querySelector(link[rel="import"]).import.querySelector("template")
to use the tag and copy its content inside the shadowRoot element? i mean how can i implement that approach? im using Angular as first example, they use an HTML file (which im guessing its a template or slots tag) and then they add it into the component as parameters on the constructor, so how with HTMLTemplates and HTMLImport i can implement that behaviour, i have used the documented functions but it doesnt works in the final phase.
Should i keep <link rel="import"> inside the shadowRoot or inside the document.head? can i implement the template without the need of adding it into the document?
I have been trying for days to do a simple customElement with shadowDOM that works completly fine, the problem is when i try to add an external to make it more robust.
Any helps? suggestions? i can show some functions that i use on the components to have an idea.
class EgHeader extends HTMLElement {
constructor() {
super();
this.shadowHost = shadowHost.bind(this);
this.shadowStyle = shadowStyle.bind(this);
this.shadowTemplate = shadowTemplate.bind(this);
this.host = this.shadowHost();
}
connectedCallback() {
this.defaultProperties();
let importSelector = this.host.querySelector(`link[rel="import"]`);
console.log(importSelector);
// this.host.appendChild(importSelector.cloneNode(true));
this.host.innerHTML = importSelector.import.querySelector(
"template"
).content;
}
defaultProperties() {
this.getAttributeNames().forEach(key => {
console.log(key);
if (key === "css") {
return this.shadowStyle(this.getAttribute(key));
}
if (key === "template") {
return this.shadowTemplate(this.getAttribute(key));
}
});
}
}
customElements.define("eg-header", EgHeader);
function shadowHost() {
let root = this.attachShadow({
mode: "open"
});
return root;
}
function shadowStyle(stylesheet) {
let link = document.createElement("link");
link.rel = "stylesheet";
link.href = stylesheet + ".css";
this.host.appendChild(link.cloneNode(true));
return link;
}
function shadowTemplate(link) {
var template = document.createElement("link");
template.rel = "import";
template.id = `${link}-template`;
template.href = link + ".html";
document.head.appendChild(template);
this.host.appendChild(template);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="./Header.js"></script>
<script src="./index.js"></script>
</head>
<body>
<eg-header css="./Header" template="./Header">
</eg-header>
</body>
</html>
// Separated file called Header.html
<template>
<nav>This is X element</nav>
<script>
console.warn("Executed when the template is activated.");
</script>
</template>
i have read that a true web component must have shadowDOM for css encapsulation, customElements for the logic of the component which i really love, and HTML Temapltes and import
What you've read is quite outdated:
HTML Imports are deprecated so you should use another method to load templates.
Because of #1, HTML templates (aka <template> elements) are often replaced par template literals.
Templates literals can be define in Javascript. This way they can be defined in a classical Javascript file or in the ES6 module.
By the way, if you still want to use HTML Imports (not recommanded) , you'll need to use a polyfill.
<link rel="import"> should be put in the <head> element of the main document, not in the Shadow DOM.
If you want to use <template> you don't need to append it to the main document.
var template = document.createElement( 'template' )
template.innerHTML = `
<h1>Title</h1>
<div>Content</div>
`
...
this.shadowRoot.appendChild( template.content.clone( true ) )
Font Awesome is not working in my shadow DOM since I have the following in it to prevent styles from leaking in and out:
:host {
all: initial; /* 1st rule so subsequent properties are reset. */
display: block;
contain: content; /* Boom. CSS containment FTW. */
}
I'm able to use other stylesheets by just inlining them within the :host property, but that doesn't work with Font Awesome since it uses relative paths in its stylesheet.
I found this post and tried it with the scoped CSS I implement, but the icons show as squares, as can be seen in my example.
I had the same issue with StencilJS.
After hours of struggle and the answer from #Intervalia I was able to fix it.
The problem is that the browser doesn't load the font files when they are only included in the shadow dom (your custom web component). This means that the fonts also has to be included in the normal html file (aka light DOM) so that the browser can detect and load them in order to make them available in the shadow dom.
In my case I didn't use Font awesome instead it was a custom font but I tried it a second time with font awesome and a clean Stenciljs project. The solution is always the same doesn't matter which custom font you need.
Step 1: Move the font into your project. I created a seperate "assets" folder inside the "src" folder to have access from all the components. In this example I downloaded font awesome for web environment https://fontawesome.com/download. (I wouldn't recommend "npm install" since you have to use it in the index.html too)
Step 2: Prepare your web component (in this case my-component.tsx). You can import multiple css files using the styleUrls property. Just import the fontawesome css from your assets directory.
import { Component, Prop, h } from '#stencil/core';
#Component({
tag: 'my-component',
styleUrls: [
'my-component.css',
'../../assets/fontawesome/css/all.css'
],
shadow: true
})
export class MyComponent {
#Prop() first: string;
render() {
return <div> <i class="fas fa-question-circle"></i> </div>;
}
}
Step 3 prepare the file where you want to use the component (in this case index.html). The important line is the "link" tag. This includes the "font awesome css" again and force the Browser to really download the fonts.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Component Starter</title>
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
I know it feels wrong and looks weird but it is not enough to include font awesome only in the index html or in the web component. It must really be included in both files. That doesn't mean the Browser will load it multiple times - it will only be loaded once.
That means that you can't deliver the font with the web component - as far as i know. This isn't a stenciljs bug this is a general problem of the browsers. Please let me know if you have better solutions.
Just for fun here is a screenshot that shows that the browser doesn't load the fonts when it is only included in one file. http://prntscr.com/p2f9tc
Update 05.10.2019:
If you want to use your font inside your web-component the explanation above is correct and still necessary. But you can also use the slot tag inside the web-component. Than you automatically bypass the font from outside (the html) into the web-component. But notice it only works for the stuff you write between the tags of your web component.
That means you can use <my-component> <i class="your-font"/> </my-component>. In this case you don't have to import the font into the web components.
One thing I have noticed is that if the page does not load the CSS file then the shadowDOM won't load it either.
I really think that the only problem us that if the font is not defined on the page that it will not work in the component since the rest of the CSS seems to properly apply to the shadowDOM elements.
This example shows just the shadowDOM trying to load the CSS and it does not work:
let template = `
<style>
:host {
display: block;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li>Tour</li>
<li>Blog</li>
<li>Contact</li>
<li>Error</li>
<li><i class="fa fa-search"></i> Search</li>
</ul>
</nav>
</header>
`;
class MyEl extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'}).innerHTML = template;
}
}
customElements.define("blog-header", MyEl);
<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>
And this example shows both the page and the shadowDOM loading it and it works:
let template = `
<style>
:host {
display: block;
}
</style>
<header>
<h1>DreamLine</h1>
<nav>
<ul>
<li>Tour</li>
<li>Blog</li>
<li>Contact</li>
<li>Error</li>
<li><i class="fa fa-search"></i> Search</li>
</ul>
</nav>
</header>
`;
class MyEl extends HTMLElement {
connectedCallback() {
const styles = document.querySelector('link[href*="fontawesome"]');
this.attachShadow({mode: 'open'}).innerHTML = template;
if (styles) {
this.shadowRoot.appendChild(styles.cloneNode());
}
}
}
customElements.define("blog-header", MyEl);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<i class="fa fa-battery-full" style="font-size: 45px;"></i>
<hr/>
<blog-header></blog-header>
<hr/>
The code I like to use looks for the <link> tag I want in the body and then uses a clone of that tag inside the shadowDOM. This way my component is not out of sync. Yes, this can cause problems if the component was not expecting a change in the CSS but I find it works well for my projects.
If you don't need shadow: true then you can load the all.min.css directly via the index.html or the main application. Even loading the all.min.js file works.
If you need it within the shadow dom, then you need to load the all.min.css in index.html and also load it within shadow root using something like this.
`
componentDidLoad(): void {
this.hostElement.shadowRoot
.getElementById("some_Id")
.insertAdjacentHTML(
"afterbegin",
`<link rel="stylesheet" href="${getAssetPath(
"/fontAssets/fontawesome-free/css/all.min.css"
)}" />`
);
}
`
I wanted to share what I did for loading in Font Awesome icons to my stencil components (shadow enabled)...
After several hours into researching this topic, I think I've discovered a solution that will be the most efficient for my components to be bundled in a agnostic way and free of any additional style sheet includes in the HTML header.
My solution was to use the stencil-inline-svg module and then import the svg file directly from the Font Awesome module like this:
// the reference to the svg can be anything (searchIcon name).
// just make sure to import the correct svg from fontawesome node modules.
import searchIcon from 'fontawesome/svgs/regular/search.svg';
#Component({
tag: 'search-icon',
styleUrl: 'search-icon.scss',
shadow: true,
})
export class SearchIconComponent {
render(){
return (
{/* Not ideal to use innerHTML but this renders the full SVG markup */}
<span class="search-btn" innerHTML={searchIcon}></span>
)
}
}
Now, I can set css rules to modify the color and size of my icon like this
.search-btn {
width: 40px; // Set SVG size at the parent.
svg path {
fill: #fff; // Update svg path color.
}
}
Obviously this requires a little bit of Font Awesome icon knowledge so you know which icons to import.
Shadow Doms's style is scoped. And it does not interfere with outer style
FWIW I created a helper method to create a link for font-awesome at the parent page level. Not sure if this is in violation of any custom-elements/Web Components standards but I'll go ahead and post here in hopes that I'll be corrected :) It works for my use case w/ internal web applications for now though.
export const addFontAwesomeStyles = () => {
injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
injectStylesheet("https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css");
}
export const injectStylesheet = (href: string) => {
const links = document.head.querySelectorAll("link");
// Already been injected
for(let l in links)
if(links[l].href == href) return;
const link = document.createElement('link');
link.rel = "stylesheet";
link.href = href;
document.head.appendChild(link)
}
Then in your StencilJS component's construtor you can use it like so:
//...
constructor() {
addFontAwesomeStyles();
}
My Angular 2 Dart application has many nested components. If a certain property of one of my components is set to true, a popup is shown.
If this popup is shown I want to add a class to the document body.
Pseudo code example:
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
Simple reason: If the popup component is displayed I want to disable body scrolling (overflow-x:hidden;). The popup component is shown if the property bool show_popup within popup_component.dart is set to true.
Unfortunatly in CSS - as far as i know - there is no selector to check this (Is there a CSS parent selector?) - otherwise I would say something like
body:has(.my_popup)
in the main.css file or something similar.
How can I achieve the desired result?
There are two way.
You can use
#HostBinding('class.someclass') bool isSomeClass = true;
in the root component if it has
selector: 'body'
or
document.querySelector('body').classes.add('someClass');
You can use :host-context(...) to style a component depending on a selector matching a parent
:host-context(body.someClass) {
background-color: red;
}
will make the background color red when the body element has class="someClass" set.
I am using ASP.NET MVC 3 with the Razor engine together with the newest version of the Telerik MVC controls.
In telerik.webblue.min.css there are 2 styles, namely t-button and t-state-default. It is implemented on a button element like this:
<button class="t-button t-state-default" type="submit">Apply</button>
I don't want to use a class attribute to specify which styles to use, I want to specify it in my own stylesheet that all button elements must use these 2 styles. I tried the folowing in my stylesheet but it doesn't work:
button,.t-button,.t-state-default{}
So all that I want to have in my markup is:
<button type="submit">Apply</button>
How would I do this?
UPDATE
When I view source this is what I see:
<link href="/Assets/yui_2.9.0/yui/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.common.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/telerikaspnetmvc/2011.2.712/Content/telerik.webblue.min.css" rel="stylesheet" type="text/css">
<link href="/Assets/Stylesheets/hbf.css" rel="stylesheet" type="text/css">
In Firebug when I select the button it shows the top most style for this button as:
button, .t-button, .t-state-default {
}
hbf.css (line 26)
This should work.
However, you could place all the styles from
.t-button,.t-state-default {}
into a single rule labeled
button {}
EDIT
I think I see the problem, based on your update. (If I understand it correctly)
This
button, .t-button, .t-state-default {
}
appears in your hbf.css
However, it is styling nothing. button is not able to reference the other styles that way.
The .t-button, .t-state-default are still receiving styles from the telerik.webblue.min.css stylesheet.
In order to make it work, you need to add button to the telerik.webblue.min.css stylesheet.
Updated:
button,
.t-button,
.t-state-default {
border: 1px solid red;
background: #ccc;
width: 100px;
height: 25px;
}
See Demo: http://jsfiddle.net/rathoreahsan/Q2JwE/
I have a link on my webpage to print the webpage. However, the link is also visible in the printout itself.
Is there javascript or HTML code which would hide the link button when I click the print link?
Example:
"Good Evening"
Print (click Here To Print)
I want to hide this "Print" label when it prints the text "Good Evening". The "Print" label should not show on the printout itself.
In your stylesheet add:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Then add class='no-print' (or add the no-print class to an existing class statement) in your HTML that you don't want to appear in the printed version, such as your button.
Bootstrap 3 has its own class for this called:
hidden-print
It is defined like this:
#media print {
.hidden-print {
display: none !important;
}
}
You do not have to define it on your own.
In Bootstrap 4 and Bootstrap5 this has changed to:
.d-print-none
The best practice is to use a style sheet specifically for printing, and set its media attribute to print.
In it, show/hide the elements that you want to be printed on paper.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Here is a simple solution
put this CSS
#media print{
.noprint{
display:none;
}
}
and here is the HTML
<div class="noprint">
element that need to be hidden when printing
</div>
CSS FILE
#media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >
ELEMENT
<div class="no-print"></div>
You could place the link within a div, then use JavaScript on the anchor tag to hide the div when clicked. Example (not tested, may need to be tweaked but you get the idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
The downside is that once clicked, the button disappears and they lose that option on the page (there's always Ctrl+P though).
The better solution would be to create a print stylesheet and within that stylesheet specify the hidden status of the printOption ID (or whatever you call it). You can do this in the head section of the HTML and specify a second stylesheet with a media attribute.
#media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
The best thing to do is to create a "print-only" version of the page.
Oh, wait... this isn't 1999 anymore. Use a print CSS with "display: none".
The accepted answer by diodus is not working for some if not all of us.
I could not still hide my Print this button from going out on to paper.
The little adjustment by Clint Pachl of calling css file by adding on
media="screen, print"
and not just
media="screen"
is solving this problem. So for clarity and because it is not easy to see Clint Pachl hidden additional help in comments.
The user should include the ",print" in css file with the desired formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
and not the default media = "screen" only.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
That i think solves this problem for everyone.
If you have Javascript that interferes with the style property of individual elements, thus overriding !important, I suggest handling the events onbeforeprint and onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
As Elias Hasle said, JavaScript can override !important. So, I extended his answer with a theoretical implementation.
This code identifies all elements with the class no-print, hides them with CSS before printing, and restores the original style after printing:
var noPrintElements = [];
window.addEventListener("beforeprint", function(event) {
var hideMe = document.getElementsByClassName("no-print");
noPrintElements = [];
Array.prototype.forEach.call(hideMe, function(item, index) {
noPrintElements.push({"element": item, "display": item.style.display });
item.style.display = 'none'; // hide the element
});
});
window.addEventListener("afterprint", function(event) {
Array.prototype.forEach.call(noPrintElements, function(item, index) {
item.element.style.display = item.display; // restore the element
});
noPrintElements = []; // just to be on the safe side
});