# Where did the HIDDEN option go?

**URL:** <https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064>\
**Category:** Elements\
**Created:** [January 25, 2025, 7:52pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064 "2025-01-25T19:52:23Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [January 25, 2025, 7:52pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/1 "2025-01-25T19:52:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2025, 9:22pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/2 "2025-01-25T21:22:52Z")

</div>

[https://forums.realmacsoftware.com/t/trying-to-streamline-using-drop-zones/45598/77](https://forums.realmacsoftware.com/t/trying-to-streamline-using-drop-zones/45598/77)

Ok some explanation here with some answers next update removed hidden and collapsed

> [@A couple of outcomes](https://forums.realmacsoftware.com/t/a-couple-of-outcomes/46052):
>
> Ok the first is the button - it takes a second to disappear when using invisible or hidden, not just in this code but other code as well, not sure why the button has a delay The second is the gallery, no images in Elements only in safari, any ideas on this Video sill have issue with screen sizes and no full screen video just jumping to largest screen, understand this, but if I change setting in the video controls it works fullscreen but is visible at all times, expect this expected behaviour [h…](https://share.cleanshot.com/hyxfYwf7rBYbvSXzht1Y)

Still a couple of issues

The hidden issue in relation to video is a tailwind dom css issue and the browser

---

<div class="post-metadata">

**Author:** ![Bill](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bill/32/107_2.png) [@Bill](https://forums.realmacsoftware.com/u/Bill)\
**Post date:** [January 25, 2025, 10:52pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/3 "2025-01-25T22:52:38Z")

</div>

Yeah using tailwind hidden can be very useful - but be aware, it just sets it to display:none, ie still in dom.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 25, 2025, 11:22pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/4 "2025-01-25T23:22:41Z")

</div>

invisible causes the same issue with video if working across different screen sizes

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [January 26, 2025, 1:20am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/5 "2025-01-26T01:20:03Z")

</div>

Works a treat for my needs, doesn’t matter that it is still in the DOM.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [January 29, 2025, 9:29am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/6 "2025-01-29T09:29:14Z")

</div>

> [@handshaper](#):
>
> 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 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.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [January 29, 2025, 5:38pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/7 "2025-01-29T17:38:30Z")

</div>

Thank you for the explanation, it makes sense.

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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 29, 2025, 9:03pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/8 "2025-01-29T21:03:00Z")

</div>

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

just a practice to check

great to be able to see xl and 2xl, excellent

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 29, 2025, 9:09pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/9 "2025-01-29T21:09:02Z")

</div>

still have the issue of a button on a drop zone remains on the screen for a second when changing screen sizes

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [January 30, 2025, 7:53am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/10 "2025-01-30T07:53:44Z")

</div>

> [@handshaper](#):
>
> I’m assuming it is OK to use the HIDDEN Tailwind Class

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!

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [January 30, 2025, 7:56am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/11 "2025-01-30T07:56:28Z")

</div>

> [@upssjw](#):
>
> still have the issue of a button on a drop zone remains on the screen for a second when changing screen sizes

That looks like an interesting bug - it could be Elements, or Tailwind, or the browser 😅

Any chance you could send me over that project so I can take a look? 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 30, 2025, 4:31pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/12 "2025-01-30T16:31:19Z")

</div>

[elementsapp://downloadDocument/gnTQSIZD69PK](elementsapp://downloadDocument/gnTQSIZD69PK)

wrong project updated

this is a simpler setup and the button remains for a second or so

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 30, 2025, 4:41pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/13 "2025-01-30T16:41:57Z")

</div>

@ben 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

```auto
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '5000px', // Correct straight quotes
        '4xl': '10000px',
      },
    },
  },
  plugins: [], // Use an empty array if no plugins
};

```

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [January 30, 2025, 7:27pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/14 "2025-01-30T19:27:26Z")

</div>

Very interesting.

So what are the ramifications of simply using `hidden` by itself on a container?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 30, 2025, 8:50pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/15 "2025-01-30T20:50:58Z")

</div>

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

some examples

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [January 31, 2025, 11:26am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/16 "2025-01-31T11:26:52Z")

</div>

the issue where the button is visible for short time longer looks like a browser rendering issue, as far as I can tell.

Anyway, from what I can tell from your posts here I think you are trying to show and hide the video at different breakpoints?

If that’s correct, you should use the `hidden` and `block` tailwind classes directly on the Video component.

Attached is a project where the video is shown / hidden on various breakpoints: [elementsapp://downloadDocument/u2ywDTGylDpo](elementsapp://downloadDocument/u2ywDTGylDpo)

**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.

Hope that help! 🙂

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 31, 2025, 11:41am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/17 "2025-01-31T11:41:06Z")

</div>

@ben unable to download you project

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

> **[Tailwind Play](https://play.tailwindcss.com/9jmO4ZKfkb)**
>
> An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [January 31, 2025, 11:55am UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/18 "2025-01-31T11:55:13Z")

</div>

are we unable to use @apply

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 31, 2025, 12:36pm UTC](https://forums.realmacsoftware.com/t/where-did-the-hidden-option-go/46064/19 "2025-01-31T12:36:23Z")

</div>

> [@upssjw](#):
>
> @bon unable to download you project

Have just fixed the link, try this: [elementsapp://downloadDocument/u2ywDTGylDpo](elementsapp://downloadDocument/u2ywDTGylDpo)