mdb-image-modal broke aspect ratio at full screen

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdb-image-modal broke aspect ratio at full screen

knowlative pro asked 7 years ago

I'm using mdb-image-modal in this way: <mdb-image-modal [modalImages]="images" ></mdb-image-modal> where images is an array of 3 items define as follow: img: "..", thumb:"..", description:".." the images thumbs are perfect. The full screen image is stretched in order to get all the space. I need the image maintain its ration between height and width. Can you help me? thanks

Damian Gemza staff commented 7 years ago

Dear knowlative, Could you provide me code of your modal and some images links? I want to test it on my machine. Best Regards, Damian

knowlative pro answered 7 years ago

Hi, here is the link with the demo code https://www.dropbox.com/s/u3g366mvkfl5ans/sampleforimage.zip?dl=0   There are 2 issues: the image ration and if you hit the arrows key in the textbox the image "viewer" is shown without any reason.   Thank you

Damian Gemza staff commented 7 years ago

Dear knowlative, It's caused by width: 100% in .ng-gallery-content img. Please add styles below to your global stylesheet and check results. For me it works like a charm. mdb-image-modal { .ng-overlay { .ng-gallery-content { > { img { width: unset !important; } } } } } Best Regards, Damian

knowlative pro answered 7 years ago

Hi Damian, thanks for the advice. It solves the problem of the aspect ratio! The problem of the arrows is still present. If the user press one cursor arrow key the image viewer get on the screen without a reason. Can you check? it is present in the demo. Thank you  

Damian Gemza staff commented 7 years ago

Dear knowlative, Please head into src/app/typescripts/pro/lightbox/image-popup.ts and find HostListener('document:keyup'), and change it with code below: @HostListener('document:keyup', ['$event']) keyboardControl(event: KeyboardEvent | any) { if (event.target.lastElementChild.className === 'ng-gallery-content') { if (event.keyCode === 39) { this.nextImage(); } if (event.keyCode === 37) { this.prevImage(); } if (event.keyCode === 27) { this.closeGallery(); } } } This problem will be fixed in next release. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
knowlative
Pro User
10Support score
2Questions 3Answers
0Snippets likes 0Snippets