Trying to streamline using drop zones

it works on iPhone and iPad also android tablet just desktop browsers

if you watch this video it is to do with m:hidden or lg:hidden etc

https://forums.realmacsoftware.com/t/trying-to-streamline-using-drop-zones/45598/50

any screen size I try stop something showing it stop the video going full screen and directs to last webpage

Yes because it makes the browser window full screen, and the video is hidden at that breakpoint.

For this to work you need to make sure the video is visible at ALL breakpoints.

oops deleted wrong post

Is this the only way to hide the video on certain screens within Elements its self

can also use layout in video component and set to collapse

choose hidden has the same issue I am addressing

ok trying to understand collapse and hidden in Elements

can see collapse works but hidden does not work the same as collapse, is this as expected for hidden

There’s some information about Visibility and what each option does in the manual. Hope that helps!

I can see how it works the collapse lets you set both visible and collapse for each screen size

hidden stops you setting visible for any screen size above you cannot set visible at a higher screen resolution by clicking on the responsive dots, you can do this in normal tailwind

when you use collapse you can set at different screens

is this intended in Elements, if you do this in tailwind you can set the next screen as md:block

if I add md:block in the classes box it works, would prefer this just to be available in Elements without having to add a class

From what I can see in your video, this looks like a bug. I’ll have to investigate this one some more and see about getting a fix in an upcoming beta. It should ā€œjust workā€, but isn’t for some reason :sweat_smile:

The Visibility setting in Elements is setting the visibility CSS property.

The block utility classes in Tailwind sets the display CSS property.

So I believe you might be confusing those two properties.

We don’t have a setting for the display CSS property in Elements due to various technical and/or user experience reasons.

Hope that clears things up! :slight_smile:

@ben thanks the visibility works fine, it is just the hidden class that doesn’t seem to work as expected, as soon as you set hidden on a screen size this affects every screen above that size, you can no longer set auto to enable you to set particular screen size to include the video.

Also see in video below when setting any screen size hidden, any screen with the video will not open in full screen it jumps to the last screen size on that page. Should this not be trapped and either work or option to open in a new page/window.

Instead of using the auto option, set it to visible instead.

That will override the invisible setting and make it visible again.

Hope that helps!

@ben that doesn’t work when using hidden, when you use hidden on a screen the next screen size cannot be shown hidden from there upwards. When you make a screen size hidden use the video component the control for fullscreen just opens the last screen size for that page, this I believe should be trapped or in the controls an option to let it open in a new window

See video below for hidden issue, if I hide a a certain screen size you cannot unhide the next screen up

@ben see using collapse and using sizing

Even collapse when using video component still links to largest screen when fullscreen is chosen

If I use sizing the video will play fullscreen

If the visibility / hidden and collapse are intended to work like this then no issue, but I kind of do not agree not trapping or option available to to choose a new window, also I think you should be able to alternate as you change screen sizes between hidden or collapse (showing or hiding not actualy mixing hidden and collapse sticking to either one)

See video

I did not show but using sizing I can control height as well

OK, I’ve actually just found a bug in the Visibility setting, this will be fixed in the next beta.

@ben Thanks great, sorry to keep going on, what about the video issue and full screen, option in component to choose new window instead of just full screen, would resolve

right click it shows but not in component itself, would like to tick or elect ion component to override just go to fullscreen

works in browser, if this was selectable as an option before opening in browser

I’m not really following what the video issue is with going full screen.

The Video component in Elements uses the native HTML <video> element, which allows the user to go full screen on their device.

If you’re looking for something else, then please let me know.

@dom under certain circumstance the video does not go full screen, if you choose hidden or collapse for different screen sizes on the same page this means when you select the fullscreen on the video while in the browser it jumps/links to the largest screen size for that page, surely this should be trapped or not allowed or you add another option in the video component to instruct it to go full screen in a new window. If you dont use hidden or collapse it is not an issue. If this is is normal behaviour both now and going forward then ok, but I would like an option in the video component under the controls to select open in a new window, I assume that would resolve the video jumping / linking to the last screen size on the same page.

Not sure how to explain other than show this video, agin if this is how the component will work then I am ok it still doesn’t seem an elegant solution

ok, now I understand :slight_smile:

I think you might have hit an edge case in the browser, could possibly be a browser bug depending on how one would expect things to work.

For what you’re trying to do (show and hide a DOM element), I think you would be better off using the display utility classes available in Tailwind.

As I said above, we don’t have any controls for the display CSS property, but you can use the classes box in the Advanced control tab on all components.

If this issue keeps cropping up then we will look to add controls for the display property. In the mean time, if you feel strongly enough about this then I’d encourage you to add this to our public suggestion list - we will be looking to prioritise the most upvoted/popular suggestions where possible :slight_smile:

@ben ok no probs just asked chatgtp to create a fix for me hopefully I can integrate into my component
just adjust button and see chat to remove the other controls