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