Width and height are ignored when slide has a description

[trych]

Describe the bug The width and height attributes that I assign to an image via data-width="400px" or data-width="90vw" etc. are only taken into consideration as long as I do not add a data-description="Bla bla" attribute. As soon as I add one, the slide seems to take the full height (up to a maximum of 100vh - descriptionHeight).

Are you able to reproduce the bug in the demo site Yes, here is a codesandbox of the issue: https://codesandbox.io/s/glightbox-test-inline-props-rypsmn?file=/index.html And here is the corresponding live page: https://rypsmn.csb.app/

To Reproduce Add an image with data-height and/or data-width attributes, set up glightbox. The width and height should now work as expected. Now add a data-description attribute with some text, the width and height are now ignored.

Expected behavior Width and height should still be taken into consideration.

Post the code you are using See the codesandbox above.

Desktop:

• macOS 10.13.6
• lastest Chrome, lastest Firefox, probably others as well

Smartphone:

• the mobile lightbox does seem to work as expected, so no issue here.

[seamofreality]

This won't help you – but I've got the same issue. Was just pulling my hair out over it, glad to know it's not just me.

[jamesckemp]

Can confirm this happens for me too.

[jamesckemp]

Seems if you set the description position to the right then the image size is OK. Maybe the interim is to do that and modify the CSS.

[jamesckemp]

I ended up using slide_after_load to add a max-width to the .ginner-container.

lightbox.on( 'slide_after_load', ( data ) => {
	const image = data.slide.querySelector( 'img' );

	if ( image.complete ) {
		someFunction( image );
	} else {
		image.addEventListener( 'load', someFunction );
	}
} );

[acc987]

Might this have something to do with the following lines of code? https://github.com/biati-digital/glightbox/blob/29e365d4148c72ac08da752a5d0ebbe595f7046f/src/js/glightbox.js#L1081-L1090

This could also explain why it works on mobile, because the code of the else if seems like it's not entered on mobile: https://github.com/biati-digital/glightbox/blob/29e365d4148c72ac08da752a5d0ebbe595f7046f/src/js/glightbox.js#L1065-L1069

From what I can tell, setAttribute would overwrite the style attribute, thus invalidating the following assignment(s), right? https://github.com/biati-digital/glightbox/blob/29e365d4148c72ac08da752a5d0ebbe595f7046f/src/js/slides/image.js#L47-L52

I am not sure whether the use of elem.setAttribute('style', ...) is deliberate, but you could try replacing that with elem.style.maxHeight = ... and see whether that helps. You might still have to make sure that the style attribute exists in the first place, for example when no width/height has been set for an image. (I am not that familiar with JavaScript nor with the entirety of GLightbox, so I cannot provide a full/proper solution to your problem, unfortunately.)

[ynamite]

Setting either a title or a description overrides the widthsetting btw. Any workarounds?

[felixranesberger]

I've searched for over a hour to get this to working. As suggested above, I'm also certain that the issue lies here:

imgNode.setAttribute('style', `max-height: calc(100vh - ${descHeight}px)`); 

But I couldn't find a way, to access the initial link element to access the data-height attribute.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[felixranesberger]

Why would you activate a stale bot to close inactive issues, when the repository is unmaintained. This just causes valid issues to be closed sooner or later, due to inactivity by the maintainer.