I would like to make my window pane unscrollable. If I set my element to overflow: hidden, I can not scroll on any page, so I tried to do it in the CSS file of the component which I want unscrollable. However, the only way I managed achieve this was adding the unscrollable class name to the element of index.html.
.unscrollable{
overflow: hidden;
}
However, in that case, all windows are unscrollable wherever I navigate on the page.
I tried to solve the problem by adding the following only to the component's CSS file:
.unscrollable{
overflow: hidden !important;
}
but to no avail.
Does anyone have an idea on how to solve it? I am very confused by not being able to influence index.html depending on the component, especially since the tag is there.
This can be done by using angular's Renderer2
You can add overflow hidden css from that component to document's body using this.
import like this
import { Renderer2 } from '#angular/core';
then declare in constructor
constructor(private _renderer: Renderer2)
then use it on ngOnInit()
ngOnInit(){
this._renderer.setStyle(document.body, 'overflow', 'hidden');
}
this will add overflow hidden to body and page will be unscrollable.
and then make sure to remove overflow hidden from body on that component destroy use ngOnDestroy() to do that
ngOnDestroy(): void {
this._renderer.removeStyle(document.body, 'overflow');
}
You can make a window sized div non-scrollable like this:
.unscrollable{
width:100vw;
height:100vh;
overflow:hidden;
}
Related
I am trying to implement dark mode in my app.
The idea is to add this to the root element:
<div id="dark">
And then this in CSS:
#dark {
background-color: #1A1A2E;
}
And then in Css, customize each dom element by using classes. For example, here I will work on cards:
#dark .card-body {
background-color: #16213E !important;;
}
#dark .card-header {
background-color: #0F3460 !important;
}
Now, this works perfectly fine.
But, with Modals, it does not work. I think it's because Modals are not rendered initially so for some reason the dark style does not apply to them.
What worked though is adding id="dark" to each modal:
#dark .modal-header {
background-color: #0F3460 !important;
}
#dark .modal-body {
background-color: #16213E !important;;
}
#dark .modal-footer {
background-color: #16213E !important;;
}
<Modal
// dark doesn't get applied automatically for modals because apparently modals are not rendered in the beginning
id="dark"
isOpen={this.state.isModalOpen}
toggle={this.toggleModal}
>
<div className="modal-header">
But, it'll be a pain to apply this to every single modal.
One solution mentioned here:
Modal should be the descendant of a tag which has id="dark". It is
loaded by the script right below the script tag and you are trying to
put 'dark' id on some div tag and the modal doesn't lie inside it,
thus the CSS selector not targeting it.
So, you need to put id="dark" on the body tag.
This solves the modals issue.
But, the problem is in my original implementation of dark mode, I am controlling that id in the root component like this:
// Root component
<div id={this.state.should_enable_dark_mode ? "dark" : "default"}>
And should_enable_dark_mode is managed like this:
manageDarkMode() {
window.addEventListener("storage", () => {
console.log("change to local storage!");
let should_enable_dark_mode = localStorage.darkMode == "true";
this.setState({
should_enable_dark_mode,
});
});
}
So the problem with the solution mentioned above is that I couldn't find a way to control the body tag from the react app. And I am not sure if it's a good thing to do.
What do you think I should do?
I see in the comments to your original question that you decided to just modify the body element in the browser DOM, which will probably work fine since the body element is not controlled by React and will likely not be changed by any other code.
I would however like to suggest a few improvements that makes it at bit less dirty:
use a data attribute like data-display-mode="dark" as a target for your CSS selectors instead of the ID. IDs are supposed to be stable and other tools and libraries (e.g. UI test tools) might rely on this.
use the Modal.container property to attach your Modals to the App element (the React-controlled global parent div defined in your React code, which you can control, not the app-root-div in index.html). Then set your data-display-mode attribute here by React-means. This way you will not bypass the virtual DOM.
use CSS custom properties for defining your colors, and then define all dark mode modifications in one place. Don't spread your dark-mode-styling code across multiple class selectors - you will have a hard time maintaining this.
I have a Button component where I do something like this
.buttonComponent{
paddingTop:100;
paddingRight:100;
}
This component renders beneath another sibling component, so I adjust the padding. However, sometimes, the
sibling component takes a while to load, so the button renders as if this was the css. How can I make sure it renders in the correct position from the start?
.buttonComponent{
paddingTop: 0,
paddingRight: 0;
}
.buttonComponent{
paddingTop:100;
paddingRight:100;
}
.buttonComponent{
paddingTop: 0,
paddingRight: 0;
}
Make sure CSS code is above the HTML in your document. This should prevent browsers from rendering content and then applying style, with a messy gap of a few milliseconds.
I don't understand what is your question? but i think that-
You need to reset your CSS by global by using following code in style sheet-
*{
padding:0;
margin:0;
}
check the import files in your reactjs files. Some time visual code/any code emulator doesn't import files correctly.
if you're using reactjs then i will give an advice to use tailwind CSS.
Hope you like it.
I'm trying to make a background color for a specific component being display in the whole component page.
It's working fine with
\ ::ng-deep body
background-color: red
But the things is when i do it like that, the body css is bleeding to the other component page, which become red too.
So what i really want to do, is making it local with host.
I tried to use
\:host ::ng-deep body
But it wasn't working too, the body background did not change color until i add a specific body tag to my html file component.
But i don't want to add a body tag because when i do this, the body size is limited to the element in the page.
I also try to use ViewEncapsulation, but it messed up with all my css.
Any help would be appreciate.
Your first issue (As you found out) with ng-deep is that it bleeds into other pages. And because CSS is lazy loaded inside Angular, everything will be fine until you go to that page, and then head to another page and suddenly everything will be red.
Your second issue is that the :host pseudo selector isn't saying "For this page only" it's saying "For everything inside this component".
So as an example :
If I have a component called MyComponent, and I have css like :
:host ng-deep div {
background-color :red;
}
And I have a template like so :
<body>
<app-mycomponent>
<div></div>
</app-mycomponent>
<app-secondcomponent>
<div></div>
</app-secondcomponent>
</body>
Only the div inside app-mycomponent would be red. The div inside app-secondcomponent would not be read. Again, :host allows you to ng-deep only within that component.
So why would you need this? Generally it's because you may use a library that you want to style, so you can place it inside a wrapper component and use ng-deep commands freely with the :host prefix, so only the library component inside that wrapper is styled and the rest of your application is unaffected.
So what's the solution? Well the other issue you have is that the <body> tag is actually outside the scope of your angular app. Typically when I've had to edit the body/html tags as a whole, I've just used plain old javascript.
So for example :
export class AppComponent implements OnInit, OnDestroy {
ngOnDestroy(): void {
document.body.style.backgroundColor = 'transparent';
}
ngOnInit(): void {
document.body.style.backgroundColor = 'red';
}
}
It's not the nicest thing in the world, but it's also not terrible. I mostly have to do this when creating modal components that want to stop the body scrolling etc.
For more reading on NG-Deep bleeding : https://tutorialsforangular.com/2020/04/13/the-dangers-of-ng-deep-bleeding/
And how :host works : https://tutorialsforangular.com/2019/12/24/using-the-css-pseudo-element-host-in-angular/
With my app, I currently have only 1 component (the nav) and I have set the CSS for app-root, as well as app-navbar as:
* {
margin: 0;
}
Despite this, the margins persist; I can't even edit them in chrome web development tools in the browser for some reason, The only way I get the margins to disappear is to go the angular root index.html file, and manually enter the style tags there,
Anything else I apply to the * tag (such as font-family) is applied to the entire document, just not margin for some reason,
If anyone knows why you'd save me from ripping any more hair out.
You can add it in app.coponent.css
* {
margin: 0;
}
and set encapsulation: ViewEncapsulation.None in component decorator.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None
})
By setting ViewEncapsulation to None all the styles apply to the entire document. Or in other words, a component could overwrite styles from another component because its styles are applied to the document head later. Otherwise you can use the global style.css file generated in your directory.
When you create a project with the Angular CLI, the CLI creates a global style file, usually under the name style.ext, where ext is the extension you chose (default to css).
So you should open this default file, let's assume it being style.css, and add those lines in it.
* {
margin: 0;
}
If I were you, I would also add this to this file :
html,
body {
height: 100%;
}
This will prevent you from some errors you could encounter later on, if you want to play with heights (I do this in all of my projects)
I want to remove the backdrop on the modal, i know there is a hasBackdrop property when opening the modal but i only want to hide the backdrop based on some condition which will take place on the modal. So i was thinking I could do so with css but after inspecting element on the modal, I couldnt find anything relating to the backdrop's css.
I quite don't understand the question.
If what you need is maybe remove the shadow box of the dialog, just find the component which contains the dialog you need to work on, find it's style file and add this:
/deep/.mat-dialog-container {
box-shadow: none;
}
More info of the usage of deep can be found on angular docs and more example of their usage here (stackoverflow's question) and on angular's blog website.
If what you need here is remove the backdrop then beforehand create a class like
.no-backdrop {
background: none;
}
and add it to the function, which is used to create a dialog:
this.dialog.open(LoaderComponent, {
backdropClass: 'no-backdrop',
});
You can also just add false as value to the field hasBackdrop like:
this.dialog.open(LoaderComponent, {
hasBackdrop: false
});
as per default, the value is true.
More information can be found on angular material v5's webpage.
Hope it helps someone.
.mat-dialog-container has box-shadow, you can remove the box-shadow. For example you can add box-shadow: none; as an inline role or box-shadow: none !important; . Both will remove the box-shadow.
Try this:
In your .css/.scss file overwrite class
/deep/.cdk-overlay-dark-backdrop {
background:none!important;
}