Angular4
Hi All. I'm have a single page within a large Angular4 app that needs to have body css that's different to the rest of the app.
I don't want to set ViewEncapsulation.None because it's just the one component that needs to be affected.
Can I use :host(), :host-context() or ::ng-deep in some way to select the body and apply the css rules? If so then how please? If not, is there another way to achieve this?
Thanks!
Thank you both very much. #Palpatine1991, you asked why I would want to access the <body> DOM element. This is because I have one page in the app which is a full screen game that is played on mobile devices and has drag and drop functionality within it. On iOS the "bounce" effect present in Safari makes drag and drop a very poor experience. So I wanted to add the following css to the body and html DOM elements of that single page, which suppresses that bounce effect.:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
I had a look into the solutions you gave (thank you!) and went with the following solution:
ngOnInit() {
this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
}
ngOnDestroy() {
this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
}
This seems to work.
Thank you :)
Why do you need to add your CSS to <body> if it affects only one component?
Using :host() it will apply the styles to the element which is selected by component's selector.
Using ::ng-deep you can select only elements which are somewhere under the host element (but <body> is not under your host!)
The only way how to change the styles of the body from the component which has ViewEncapsulation.Emulated is using the Renderer2 API but it seems to me like a very bad practice
If you need to override some global <body> styling of your component, you can do it using :host-context. Example here: https://stackblitz.com/edit/angular-material2-issue-oodjmm
Related
I am using PrimeNG for my project I used p-dropdown with appendTo body only for particular components files, and I changed the css in only one file as follow, for example
geneFinder.component.scss
.ui-dropdown-panel {
z-index: 999 !important;
}
and component file is
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body"></p-dropdown>
But this css is affecting in all other files also. If I removed the !important it is not affecting in other pages and this is not working with particular component itself. How to fix this issue.?
you can try this
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" [style]={'z-index':'999 !important'}></p-dropdown>
You can also customize the z-index with the p-dropdown attribute baseZIndex. This way, you don't need to set it in css, and it affects only the dropdown where the attribute is set.
Angular is a single page application framework hence all the CSS would be combined and CSS styles will be created inside style tag of the single html page. If we are having a CSS class with name that is common to other component's elements it does affects it.
In case of component specific CSS, create a custom class name something like,
.mycomponent-ui-dropdown-panel {
z-index: 999 !important;
}
and add the class to the element of the component's html where we need this change to be applied. This will make sure that other elements of other components are not affected by the CSS style.
I fixed the issue by adding the panelStyleClass in my component,
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" panelStyleClass="overlay-zindex"></p-dropdown>
.overlay-zindex{
z-index: 999 !important;
}
Given a typical Angular Material dialog, which has a max-width of 80vw set on .mat-dialog-container, how can I formulate a selector to override it? I'd like a true full-width dialog.
The problem is scoping--Angular-CLI compiles component CSS with scope attribute selectors.
Therefore, this:
.parent .child
becomes:
.parent[some_attr] .child[some_other_attr]
However, this particular element doesn't seem attached to any component--it doesn't have a dynamically-generated attribute on it.
I've attempted overrides in both the dialog stylesheet and the host component's stylesheet with no success.
Angular special selectors
Dialog Plunkr
Let me try again. I'm not doing a good job of explaining the issue.
Let's say I add this to my host component stylesheet:
.mat-dialog-container {
max-width: 100%;
}
I have a build watch running, so the app is recompiled. The CSS output is now this:
.mat-dialog-container[_ngcontent-c6] {
max-width: 100%;
}
However, that element doesn't actually have the attribute _ngcontent-c6 on it. That attribute is applied to other elements which are inside siblings of ancestors of .mat-dialog-container. The selector is just wrong.
If I add that CSS to the dialog component's stylesheet, something similar happens, but with a different attribute ID.
If you can add an id to your main body tag and you want it to be on all of these dialogs you can use this
<style>
#bodyID .mat-dialog-container {
max-width:100vw;
background-color: blue;
}
</style>
It will override the current style, at least in the plunker you supplied.
If you need specific style for each dialog, did you look into this?
how-to-style-child-components-from-parent-components-css-file
You don't need a body id, because as you've mentioned the selector is rewritten by Angular such that it stops matching the element altogether.
But yeah it seems the only way around this is to just throw your hands up and forget about component stylesheet scoping and add your CSS rule to the page stylesheet. The caveat, of course, is that this rule needs to be added to every page that uses the component, which can be seen as absurd depending on what your component is intended to be used for and by whom.
I have a web app using angular 2 and angular materials. I am using a simple modal:
<h1 md-dialog-title *ngIf="data">{{data.title}}</h1>
<div md-dialog-content>What would you like to do?</div>
<div md-dialog-actions></div>
But when I run the app the modal's height is 100%. When I inspect with Chrome dev tools, it looks like Angular Materials/Angular 2 is injecting some classes that wrap around the md-dialog-content. Here is a snapshot:
Anyways, does anyone have any suggestion how to override the behavior so I can manually affect the size? Thanks.
Have you tried opening your dialog with specific height that you need? like:
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
Another way to force custom styles is to customize the theme itself. you can have a look at the guide here.
You can override material styling from your scss/css.
But due to view encapsulation, you need to use /deep/ selector that will allow you to get hold of the Material class added when the component is rendered. For example:
/deep/ .mat-tab-group.mat-primary .mat-ink-bar{
background-color: red;
}
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.
One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.
Other option might be using iframe.
Is there any other way this issue can be solved?
Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.
If you still need to use .row, just copy the .row styling and name it different. I.e:
/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
Finally, dont't forget to include the jquery.foundation.topbar.js file and calling
$(document).foundationTopBar();
Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components
It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it
here and here. Then you'll be able to do something like this:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Taken from this answer
Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.
Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.