Documentation around using the html type

[brendon]

Hi @fancyapps, I noticed there isn't much in the version 5 documentation around the html type. In my testing simply passing in some HTML wrapped in a single <div></div> is problematic in that that div gets merged with the .fancybox__content div which has a display: flex; style. This has knock-on effects for the content inside that's been written to expect display: block;. It's easily fixed by just double-wrapping the html in two divs but I just wanted to check that there isn't an actual option for this issue? :)

[fancyapps]

Hi, You can use defaultdisplay option to customize the value of CSS display property.
Actually, the script first tries to just "unset" display:none inline style. It then checks to see if the element is visible, and only then sets a value if not.

https://jsfiddle.net/3be5gkdr/
https://fancyapps.com/fancybox/api/options/#defaultdisplay

[brendon]

Ah yes, I see that setting display: none; causes it to be display: block; (or whatever is configured).

I wonder then if the default display for .fancybox__content should be block instead of flex to match this. An example of this change being useful would be for the ajax type where the incoming content may not have display: none; on the root element.

[fancyapps]

Could you, please, try the latest release to see if that works better for you?

[brendon]

In the latest version it removes display: none but doesn't replace it with display: block even if defaultDisplay: "block" is configured. This then falls back to the CSS which is display: flex.

Is there a particular reason the container has display: flex by default? :)

[brendon]

Hi Jānis, just following this one up. I did a double-check just in case I was doing something wrong (with version 5.0.36). My hidden inline looks like this:

<div style="display: none;" data-eportfolios--jstree-target="exportMessage">
  Your ePortfolio has been queued for export. Click
  <a href="...">Export and Import Jobs</a>
  to check on the export status and download it once it is exported.
</div>

I have the following default set:

Fancybox.defaults.defaultDisplay = "block"

When activated via:

Fancybox.show(
  [{
    src: controller.exportMessageTarget,
    type: 'inline'
  }]
)

The inline is shown but the display style is just removed rather than being set to block which means that the default display of .fancybox__content takes effect which is display: flex. In my case this results in my text nodes and the a node being stacked vertically (rather than rendering inline) because another default style is flex-direction: column.

Hope that helps explain the problem more clearly :D