Under VISIBILITY there used to be a HIDDEN option. I notice this has been changed to INVISIBLE, which merely makes the component invisible but does not remove it from the page hierarchy. Whereas HIDDEN removed the component without leaving a hole in the page.
This was very useful if you had things that needed to be shown and hidden, but when hidden didn’t leave a hole in the page where the component would have been.
Has this been moved somewhere else or is this another example of where we need to use a Tailwind class to really hide the component?
I tried the Tailwind COLLAPSE class but it does the same thing as invisible. Is there a way of hiding and removing a component from the page hierarchy?
This was a bug in the component controls—hidden should never have been an option in the Visibility control.
The hidden option applied the Tailwind utility class hidden, which actually sets display: none; in CSS. However, display and visibility are distinct concepts:
display: none; (Tailwind’s hidden)
Completely removes the element from the document flow.
The element no longer affects layout and does not occupy space.
visibility: hidden; (Tailwind’s invisible)
Hides the element from view but keeps it in the document flow.
The element still takes up space and affects layout.
Since visibility controls should only modify visibility properties, having hidden in this control was incorrect. The correct fix was replacing hidden with invisible, ensuring the control behaves as expected by keeping elements in the layout while making them visually hidden.
We do not currently have a control for setting the display of a component due to some complex technical issues affecting certain components. We recognize that a display control would be useful, but we need to take the time to implement it properly to avoid unintended issues.
Until there is a DISPLAY option I’m assuming it is OK to use the HIDDEN Tailwind Class to achieve what I need. I have been using it already and of course it does exactly what I need.
ok getting there with visibility and different screen sizes, have to adjust the code so not as flexible, as long as 2xl is set t visible you can use video full screen
Yes, absolutely! You can always use any Tailwind class on your component, including hidden.
However, when using display utility classes to show and hide components, it’s important to ensure you’re setting the correct display value when making them visible again.
For example:
• If you’re toggling the visibility of a Grid, you’ll need to restore it using grid for the appropriate breakpoint.
• Incorrect:hidden md:block (This will break the grid layout.)
• Correct:hidden md:grid
• Similarly, for a Flex, you should use hidden md:flex instead of hidden md:block.
• Just to complicate things further, the Container component currently defaults to display: grid, so you would need to use hidden md:grid to restore it properly (this could change in the future).
As you can see, managing display values dynamically isn’t always straightforward. This complexity is one of the reasons we don’t currently have a built-in Display control in our components—but, as I said, we’re aware of the need and evaluating the best way to implement it!
@bon as of now I believe this is not possible
just an example if I need to add additional screen sizes might resolve my issue with video fullscreen, need to test in tailwind outside of Elements
module.exports = {
theme: {
extend: {
screens: {
'3xl': '5000px', // Correct straight quotes
'4xl': '10000px',
},
},
},
plugins: [], // Use an empty array if no plugins
};
I think I have have tried every combination I am prepared to spend time on, and it has been a lot, just a combination, the only thing I still cannot overcome just using Elements and tailwind is if the 2xl screen size when using video and triggering fullscreen is set to video is set to I visible then fullscreen is replaced with the largest screen view, not found any real issues even using hidden
Note: I’m using the CSS Classes in the Advanced group - this control is also responsive, so you can override the classes on each breakpoint and Elements will apply the appropriate breakpoint prefix (such as sm:, md:, etc).
Alternatively, you can of course enter all the classes in one go as you have been doing.
the issue I have is, it is not possible with tailwind to make the video hidden or invisible at 2xl and still open a video fullscreen from a video visible at another screen size, it only works when the 2xl is set to visible I am resigned to this . Maybe your project resolves this but cannot download
When I test in tailwind play the button does not remain on the screen
