customize mdb-modal width

WordPress database error: [Can't create/write to file '/tmp/#sql-temptable-4db-128f15-72.MAI' (Errcode: 28 "No space left on device")]
SELECT p.* FROM wp_mdb_forum_posts AS p LEFT JOIN wp_mdb_forum_posts AS q ON( q.Id = p.ParentId AND p.Id = q.AcceptedAnswerId ) WHERE p.PostTypeId = 2 AND p.ParentId = 117391 GROUP BY p.Id ORDER BY CASE WHEN q.Id IS NOT NULL THEN 1 ELSE 0 END DESC, p.UpvoteCount DESC, p.CreationDate ASC

Topic: customize mdb-modal width

SourceCorrect1 pro premium priority asked 4 years ago

0 0

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/

Arkadiusz Idzikowski staff commented 4 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 open method 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 4 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 open method 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 open method 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 4 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.

Add comment