Topic: customize mdb-modal width
HTML/TS code sample
I want to open a custom width modal on all screen size (ipad to xl desktop), so I wrote the custom style as mentioned below.
.global-search-modal { top: 65px !important; min-width: 1398px}
fyi- I have created a separate global-search modal component and i am calling it on the navbar component.
navbar.html file
src="/assets/flatsvgicons/global-search.svg" alt="" srcset="" class="filter-list" type="button" aria-controls="offcanvasRight" title="Source List" (click)="search()"
navbar.ts file
search() { this.modalRef = this.modalService.open(GlobalSearchComponent, { containerClass: 'right', modalClass: 'global-search-modal modal-side modal-top-right', }) };
navbar.scss
when i apply the .global-search-modal class through navbar.scss file the styles are not getting applied. So when i moved the very same code to styles.scss file it is working fine.
and JFYI the modal component contains the modal header and the body content and the respective styles, and in tc file there is a close modal method.
I figured out my previous issue that if i am applying the class to on modal using open method it was getting applied to other modal as well.
But now what i am facing is when i tried to open the modal in small devises its not opening.https://mdbootstrap.com/support/angular/custom-modal-width-is-not-opening-in-smaller-devises/
Unfortunately, I am unable to reproduce this error. Modal opens correctly even on small devices. Check that you don't have animations turned off in dev tools (https://developer.chrome.com/docs/devtools/css/animations/). Or test it again in incognito mode. What version of chrome are you using?
SourceCorrect1 pro premium priority commented 3 years ago
Currently using Version 97.0.4692.71
Grzegorz Bujański staff commented 3 years ago
We also check it on the latest chrome version and everything works fine. Are you sure you don't have animations turned off in your browser dev tools? Have you checked if the same is happening in another browser / device?
SourceCorrect1 pro premium priority commented 3 years ago
Yes, I checked in on the chrome animation tab is by default selected 100% and i Checked in Firefox as well the modal is not opening up.
Did my above code structure looks good ?
Arkadiusz Idzikowski staff commented 3 years ago
@SourceCorrect1 The code syntax is correct.
Could you please clarify what is the current problem with this component? We have covered a couple of issues in this thread and I would like to make sure which one has not been resolved yet.
The styles specified in the navbar stylesheet apply only within the template of this component, you can read more about this behavior in the Angular official guide: https://angular.io/guide/component-styles#style-scope
In this case, you would need to add modal styles globally (styles.scss) or use Angular piercing operator ::ng-deep (also described in the guide).
SourceCorrect1 pro premium priority commented 3 years ago
@Arkadiusz Idzikowski I tried all the possible,
1st ) Initially the modal width class was in styles.scss (glabally), by using ::ng-deep I moved to nav-bar file from ware the modal is being called it is working fine on the larger devises,
and my 2nd try, I moving complete modal styles to styles.scss (glabally). Width dint get applied properly on large screen itself which was working properly as expected earlier on larger screen.
In my both case 1st and 2nd try the modal dint opened in smaller screens.
Arkadiusz Idzikowski staff commented 3 years ago
@SourceCorrect1 We tested the component with many different combinations but were unable to reproduce the problem.
Could you please prepare a simple demo project? You can upload it easily using our MDB GO or send it via email to a.idzikowski@mdbootstrap.com
https://mdbootstrap.com/docs/standard/cli/
SourceCorrect1 pro premium priority commented 3 years ago
@Arkadiusz Idzikowski Finally i figured it out, modal will not open in smaller devices if the img tag is not wrapped in button tag. But in Desktop/large scale devices it works fine.
Thank you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.5.1
- Device: Laptop
- Browser: chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 3 years ago
@SourceCorrect1 Please edit your post and provide an example HTML/TS code on which we will be able to reproduce this problem?
Do you only add a new modal class using the TS options or also modify modal css styles in your scss file? The options you add to the
openmethod should be added only to the specific modal that is opened by this method. I tested that on our end and it looks like everything is working correctly.Arkadiusz Idzikowski staff commented 3 years ago
@SourceCorrect1 Thank you for the example code. Could you provide more information for the question I asked in the previous comment? You mentioned that the styles are applied to other modals as well, but in the code you provided there is only one
openmethod used to open one specific modal.I'm not sure if the problem is in TS (other modals have options/classes that you did not specify in the
openmethod or in CSS (you need to apply CSS only to one modal, but the styles are also changing other components).SourceCorrect1 pro premium priority commented 3 years ago
@Arkadiusz Idzikowski, @Grzegorz Bujański
I edited my post. I was able to figure the base issue on this ticket and i added the new code snippet.