Hello my beloved community,
Using angular with angular material.
With the default configuration when you open up a material dialog, it darkens the background a bit. Now I would like it to be a blurred background instead. I tried playing around with the css styles but I could not get the background of the window to change (couldn't get the right selector inside of component template).
I went through the documentation but there is nothing there. I can play a little bit more with the styles since I am sure there is probably some tricky way but considering the darkening effect is already there out of the box I would assume there should be a theming feature available out of the box as well. What you think?
I guess you've missed the property MatDialogConfig - backdropClass in the docs.
Check this StackBlitz DEMO for a simple example
From this DEMO:
dialog-overview-example.ts:
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: {name: this.name, animal: this.animal},
backdropClass: 'backdropBackground' // This is the "wanted" line
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
}
styles.css:
.backdropBackground {
/* your css needs */
}
You can achieve a nice effect by combining opacity and blur. Do like this:
Add backdropClass to your dialog-options:
backdropClass: "bdrop"
And these rules to your stylesheet:
.bdrop {
background-color: #bbbbbbf2;
backdrop-filter: blur(4px);
}
Demo: https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/
The given answer by #benshabatnoam is absolutely correct, but the documentation also has another option to disable the backdrop altogether.
hasBackdrop
Here is an example:
https://stackblitz.com/edit/angular-ei9hdv
Also you can just overide class .mat-dialog-container {} in your styles.scss
.mat-dialog-container {
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
background: #fff;
color: black;
}
const dialogConfig = new MatDialogConfig();**strong text**
dialogConfig.id="dialog"
this.dialog.open(CreatOrderComponent,dialogConfig)
// you can give it an ID then you can use that id to style it
Related
I'm trying to change the Dialog background
without touching the style.css file.
As some other answers tell, there are many ways to set the Dialog style:
1- This solution works for width and height but the transparent background is "ignored".
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: "myClass",
});
.myClass{
background-color: transparent !important;
max-width: none !important;
}
2- You can also use ::ng-deep like this:
In this case the background color gets set to transparent but all the Dialogs aquire this property and I don't want that to happen
::ng-deep mat-dialog-container {
background-color: transparent !important;
}
For what I saw the panelClass: "myClass" option overrides this class cdk-overlay-pane
Meanwhile what I need to override is mat-dialog-container without compromising other dialogs.
Is there a way to do that without compromising the other Dialogs?
Use host in your component style-sheet, with that, you only modify the styles for that particular component:
:host ::ng-deep mat-dialog-container {
background-color: transparent !important;
}
UPDATE
So in order to customize the material dialog, you will need to create a custom css class, and set that class within your style.scss file:
style.scss
.custom-modalbox > mat-dialog-container {
background-color: transparent !important;
}
And where you have the MatDialog injected, use that css class for the panelClass property:
YourComponent.ts
onOpenDialig() {
this.dialog.open(DialogComponent, {
disableClose: true,
width: "100%",
height: "100%",
panelClass: 'custom-modalbox', // if you don't set this
// that css class won't applied
});
}
So with that, other components can use the dialog safely without affecting the look & feel if they don't use custom-modalbox
Try to use ::ng-deep but this way, for example
::ng-deep {
.mat-dialog-container{
box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
background: #7e2727;
color: rgba(0, 0, 0, 0.87);
}
}
Using the Drag and Drop behavior from the Material CDK library, I'm trying to change the cursor upon dragging a cdkDrag element.
For example, in this StackBlitz the cursor is grab upon hover. I'd like it to change to grabbing upon drag. An example of this is what happens when grabbing a row in Google Sheets:
Reading the documentation for styling a drag and drop component, it looks like adding a cursor property to this class should do the trick:
.cdk-drop-list-dragging: A class that is added to cdkDropList while the user is dragging an item.
The code looks like this:
.example-box {
/* other CSS properties */
cursor: grab;
}
.cdk-drop-list-dragging {
cursor: grabbing;
}
However, as you can see in the StackBlitz, that doesn't seem to change the cursor. I'm guessing this is because this class applies to the list and not the cursor.
Another potential was the .cdk-drag-preview class:
.cdk-drag-preview: This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged.
This doesn't seem to work either. I think it's because it changes the element rendered next to the cursor and not the cursor itself.
Any ideas on how to get the cursor to change while dragging?
The previous solutions did not work for me, but here is something that will most likely work for anyone still having issues:
first add this global CSS:
body.inheritCursors * {
cursor: inherit !important;
}
and to your cdkDrag element add cdkDragStarted and attach it to a method in your .ts file:
<div cdkDrag (cdkDragStarted)="dragStart($event)"></div>
In your .ts file you can then toggle the cursor you want when a drag starts and stops:
bodyElement: HTMLElement = document.body;
dragStart(event: CdkDragStart) {
this.bodyElement.classList.add('inheritCursors');
this.bodyElement.style.cursor = 'move';
//replace 'move' with what ever type of cursor you want
}
drop(event: CdkDragDrop<string[]>) {
this.bodyElement.classList.remove('inheritCursors');
this.bodyElement.style.cursor = 'unset';
...
...
}
Here is a link to a working example on StackBlitz
Hope this was helpful.
Just add cursor: grabbing to your example-box:active
.example-box:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
cursor: grabbing;
}
The :active selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active selector can be used on all elements, not only links.
Additional information here
https://www.w3schools.com/cssref/sel_active.asp
Stackblitz
https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css
For myself, I added the following style override to re-enable the custom cursor while dragging.
.draggable-element .drag-handle{
cursor: grab;
}
.draggable-element.cdk-drag-preview .drag-handle{
pointer-events: auto;
cursor: grabbing;
}
Link to live Example
Just use onmousedown = "changeCursorPoint()" event function -
private changeCursorPoint(): void {
document.body.style.cursor = 'grabbing';
}
Clear the function again on (cdkDropListDropped) = "clearCursorEvent()"
private changeCursorToDefault(): void {
document.body.style.cursor = 'default';
}
In your linked Stackblitz example, you're not using a droplist, so you'd want your css to be:
.cdk-drag-dragging {
cursor: grabbing;
}
In my case, drag-dropping using a list on a table-body element, I used:
table tbody.cdk-drop-list-dragging td {
cursor: grabbing !important;
}
I want my loadingController wrapper to be shown with a customized css style but the css's rules doesn't apply to the element (the loadingController wrapper).
I have this in my component:
ionViewDidLoad() {
let loader = this.loadingController.create({
spinner: 'bubbles',
content: 'getting data...',
cssClass: 'loadingwrapper'
});
loader.present().then(() => {
//some stuff
...
loader.dismiss();
});
}
and this in my css file:
.loadingwrapper{
width: 77% !important;
height: 15% !important;
color: black !important;
font-size: 1.25em !important;
background-color: aliceblue !important;
border-radius: 10px !important;
}
In spite of doing this (I've even tried whithout "!important"), the changes (none of them) doesn't apply to the loading wrapper and it shows a bit awful.
Not sure where you are applying the css but if you are applying the css in the page component file you going to have a hard time, because the loading controller sits outside the page selector. So if your page component name is Foobar and you have a .scss file foobar.scss
page-foobar{
.loadingwrapper{
// not going to work
}
}
you can either add it globally to your app/app.scss file or ( i think this will work )
.md,.ios,.wp{
page-foobar{
.loadingwrapper{
// styles!
}
}
}
You have to do it globally inside the variables.scss file.
Android
$loading-md-border-radius:10px;
ios
$loading-ios-border-radius: 10px
Windows
$loading-wp-border-radius: 10px
You can see global variable list here.
I'm just now becoming familiar with the noUiSlider and I googled to find examples of what exists out there with different ways to use it. Unfortunately most were adding custom images instead of adding text.
Does anyone know where or have some examples of how to design the handle in a unique way using the css or js files?
All handle styling is on the class .noUi-handle. The 'carving' on the handle is done using the :before and :after pseudo elements. You could use these elements and their content property to display text.
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF;
}
.noUi-handle:after {
content: "Some words here"; /* Add something like this */
}
If the handle text has to be updated with the slider value, you could set the value as an attribute on the slider as such:
slider.noUiSlider.on('update', function(values, handle) {
this.target.setAttribute('data-value' + handle, values[handle]);
});
And then style the handle using that attribute:
[data-value0="5"] .noUi-handle:after {
content: "Text only for value 5";
}
While digging through mixins.less file of bootstrap 3 I found the following:
// CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
// New mixin to use as of v3.0.1
.text-hide() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
Has anyone been using this? Where do I specify the image that I want to replace the text? Am I right to assume that all this does is to hide text and not replacing it with an image?
Yes, this does not include an image, it only hides text. You will need to do your own image replacement, perhaps in a custom CSS rule:
.my-image-replacement {
background-image:url('myImage.jpg');
.text-hide();
}
I use the following for convenience:
.image-replacement( #url, #width, #height ) {
display: block;
width: #width;
height: #height;
background: url(#url) no-repeat left top;
.text-hide();
}
.logo {
.image-replacement( "images/logo.png", 100px, 50px );
}
Note this version is not retina - use bootstrap's .img-retina() from mixins.less instead of the background line above when you're serving hdpi images…