mdb-image-modal: how to change the image size

Topic: mdb-image-modal: how to change the image size

cjj2009 free asked 4 years ago

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.)

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 4 years ago

Hi Bartosz,

It is work now after I added this statement in the TS file!

Many Thanks again, James

royax1988 free commented 4 years ago

up for this, i am having this problem also.

Arkadiusz Idzikowski staff commented 4 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/

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 4 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; }

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

cjj2009

99Support score
7Questions 6Answers 0Snippets