Inline content – some not auto-sizing

Your Account / Forums / Easy FancyBox Pro / Inline content – some not auto-sizing

  • Author
    • November 28, 2018 at 9:16 pm #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.

      View post on

    • November 28, 2018 at 9:16 pm #12901

      Hi, it will be more helpful to see the issue live. Can you share a link to the web page where this can be seen? You can use the contact form if you prefer to keep it non-public.

    • November 28, 2018 at 9:16 pm #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.

    • November 28, 2018 at 9:16 pm #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?

    • November 28, 2018 at 9:16 pm #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.

    • November 28, 2018 at 9:16 pm #12910

      Resolved. Thanks

  • You must be logged in to reply to this topic.