28 November 2018 at 21:16 #12900
“Try to adjust size to inline/html content.” is selected and works for a majority of the inline content boxes but some of them are limited to a smaller size (the same dimensions). The content is identical but the inline content container is sizing differently.
28 November 2018 at 21:43 #12901
28 November 2018 at 22:29 #12904
Hi Saam, thank you for the email.
Looking at your site, I see you have to ways to go:
1. Either uncheck the option “Try to adjust size to inline/html content” and then set one standard size under Dimensions in the Window section. This works well if you know all your inline content is going to fit within the same box size.
2. Or, if you have inline content which needs different sizes, leave the option checked but then you need to define the preferred box size (at least a fixed width) on each inline content div.
This last option gives you the flexibility to adapt your inline content boxes to various sizes.
I see for the first inline content div, you used
<div id="column1ID-2" class="hentry" style="width:460px;max-width:100%;">which is good. If you do the same for all others, then all will keep to that width and adapt height to what is needed depending on the content.
28 November 2018 at 22:43 #12905
We want the lightbox to adapt to the size of the content. Not set a static size. If you look at the 3 columns, the first two do this correctly. The third does not. Why is this?
28 November 2018 at 23:16 #12906
What I see is that in the firs and last column, each content div has a width set in its style attribute. Fancybox can work with that. But in the center column, there are no width given to the divs. This means the inline content has no width and FancyBox does not know what to do. So it waits until the browser renders the content and then adapts to that.
Depending on what the browser decides to do with the content, the resulting light box varies in size. This usually depends on nested elements inside the div, like images, title, paragraphs and lists. In a list element, it’s each item line length that decides the width up until the maximum allowed space. The max is by default the size of the wrapping element, in this case the inline content div. But since that has no size set, it will make stretch to the size it thinks it needs, which makes it kind of unpredictable…
May I ask why you prefer not to give these light boxes a fixed width? On smaller screens, the light box will reduce its size to make it fit the screen. The height will adapt according to the content dynamically while the light box sizes are still more predictable.
29 November 2018 at 15:38 #12910
You must be logged in to reply to this topic.