I do not understand the responsive ui builder.
See video. It is fine in ui builder.
Application ID CE9CA061-AFDB-F16B-FF15-2A78893EF900
Tripperplanner > Template_Test
- when I view frontend and shrink it, it becomes none responsive?
- On Mobile the menu bar disappears. Which actually is good. I just need to work out how to make it visible when hamburger menu is clicked on but, why does it disappear…
Tablet and Mobile screen at UI builder has 758 / 310px width.
And you can see in the preview - all look like at UI builder (use dev tools because the browser can not be so shrink as a mobile screen at UI builder)
What about the sidebar - it’s there, but it’s gone over the edge of the window. If you want to do it visible, change the position for this element using the
on click event. Here we have two way for it:
- Change style for the component.
- Add/remove class with position properties.
So you are saying that on desktop this would not be responsive with a side bar and could look like this in some browsers?
If so, its a real struggle to get a sidebar menu that would work with the ui builder. I suspect I am missing something?
I am trying to create a login template similar to https://call.novocall.co/
It functions like this https://www.screencast.com/t/pfxxR0kkiZki
Side bar for desktop
Tablet and Mobile hamburger that swipes out and in.
What I have at the moment is
Desktop that does not resize correctly. When it gets to hamburger view I need to swipe it in and out but am happy for the main area not to be responsive.
I believe this can be done, but it is outside of our support and is in the domain of the professional services (consulting) team. If you’d like to engage a consultant from our side, please contact email@example.com.
This is coming from different screen sizes.
In UI builder width - 310px
On your mobile i think its - 480 or higher.
Either it does not confirm or, I am doing something fundamentally wrong. Why is it not being responsive on desktop. 05.31.2021-15.54.48
I would recommend you to create a simple page with a Grid component, configure it as you need and then compare it with the problematic page.
There are lots of configurations/components and It’s quite tough to understand where exactly the issue is.