customize modal to a sidebar


Topic: customize modal to a sidebar

Innovaitec pro premium priority asked 1 months ago

Expected behavior We want to create an modal which starts out of the right bottom corner and fills 80% of the screen that we can still see the Sidebar on the left.

Actual behavior Its not possible to cumstomize with css or other techs the look and feel from the modal. We have to define a differen vaule for modal l or xl.

Resources (screenshots, code snippets etc.)

our current look. We can not customize the size as we need it and the placement. Do you have any tips for us?

enter image description here

our modal we want to create

Our goal for the Modal we need to create


Arkadiusz Idzikowski staff answered 1 months ago

@Innovaitec You can add a custom class in the modal options and/or customize existing classes. Here is an example:

TS:

  openModal(): void {
    this._modalService.open(ModalComponent, {
      containerClass: 'right',
      modalClass: 'modal-custom-size modal-side modal-bottom-right'
    });
  }

SCSS:

.modal-custom-size {
  max-width: 80%;
  bottom: 0px !important;
  right: 0px !important;
}

.modal-content {
  height: 100vh;
  border-radius: 0;
}

Edit:

If you can't add these styles globally you can use Angular ng-deep selector:

::ng-deep .modal-custom-size {
  max-width: 80%;
  bottom: 0px !important;
  right: 0px !important;
}

::ng-deep .modal-content {
  height: 100vh;
  border-radius: 0;
}

Innovaitec pro premium priority commented 1 months ago

we used the code snipped but it will be ignored you have any advice? We dont want to customize the existing class coz we can not update the theme after it.


Innovaitec pro premium priority commented 1 months ago

we figured out now that the onliest class in oour enviroment ist the class styles.scss is. We are fusing for each component a custom class for .ts and .scss. Here we want to do our changes.

@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})

if we add the lines now to this located scss we have no impact. if we add the lines to the styles.scss we have an impact.

now what we need to do to use the classes as described before. you have an advice for us?

greetings Innovaitec


Arkadiusz Idzikowski staff commented 1 months ago

@Innovaitec I edited my answer and added a solution for your use case.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: Desktop PC / Laptop
  • Browser: all
  • OS: Windows
  • Provided sample code: No
  • Provided link: No