Topic: mdb-image-modal: how to change the image size
Expected behavior Set the image size to smaller or bigger in mdb-image-modal. Actual behavior use: style="height: 185px;" but it does not work. Resources (screenshots, code snippets etc.)
Dear @cjj2009
It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None // <------
})
Hope it helps!
Best Regards, Bartosz.
cjj2009 commented 5 years ago
Hi Bartosz,
It is work now after I added this statement in the TS file!
Many Thanks again, James
royax1988 commented 5 years ago
up for this, i am having this problem also.
Arkadiusz Idzikowski staff commented 5 years ago
If you want to add the custom styles to your component scss file instead of using global styles in styles.scss, you need to se ViewEncapsulation to 'None'.
See: https://mdbootstrap.com/docs/angular/getting-started/styles-customization/
Hi!
If you want to change the image in lightbox size, add this to your styles.scss:
mdb-image-modal .ng-overlay .ng-gallery-content > img {
width: 700px !important;
height: auto !important;
}
If you want to change size of images in rows, add this:
mdb-image-modal img.ng-thumb {
width: 450px !important;
height: auto !important;
}
Hope it helps!
Best Regards, Bartosz.
cjj2009 commented 5 years ago
Hi Bartosz,
Thanks for you reply, but it does not work after I added these code in the component.scss.
mdb-image-modal .ng-overlay .ng-gallery-content > img { width: 700px !important; height: auto !important; }
mdb-image-modal img.ng-thumb { width: auto !important; height: 280px !important; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.4.0
- Device: laptop
- Browser: Chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No