Injected live reload iframe isn't hidden

Phoenix Forum Questions / Help
,
1

In my app, the live reload iframe that’s injected into the html of every page isn’t hidden.

<iframe hidden="" src="/phoenix/live_reload/frame"></iframe>

It has a height of 150 and its pushing everything else up on the page. Why is it visible?

1 Like
2

I noticed this also. The following CSS does the trick of hiding it.

iframe[src="/phoenix/live_reload/frame"] {
  display: none;
}
4 Likes
3

Thanks! This did the trick

4

Just to mention this as well. This is because of css tailwind does apply. By default the hidden attribute should work as expected. For tailwind I’d suggest adding css to make hidden actually do its job.

3 Likes
5

Specifically, maybe something like this:

[hidden] {
  display: none !important;
}

This is the same as the default style rule for hidden, just with !important so that it overrides the tailwind’s display: block reset for iframes. (And indeed, so that it overrides style rules that set display in general: it’s unlikely that you anywhere want the hidden attribute to not actually hide the element it’s on.)

6 Likes