Dashboard layout (mobile) - has anyone found an elegant way to *NOT* show sidebar on initial page load

Need help
1

Hi there,

I don’t expect I’m the first to ask this but has anyone managed to build a dashboard layout that doesn’t show the sidebar initially in mobile view? Using conditionals (or state), I know you can hide the sidebar by saying - if screensize is less than 500px, do not show sidebar. However, there is a brief moment where you can see it and you continue to see it whenever you change pages. For example - Dashboard | Sline - looks great, but if you view in mobile view and load the page or navigate to a different page you can see the sidebar for a split second on page load. Has anyone come across a workable solution? Cheers

2

I’ve never experienced that before, nor can I replicate it in any quick tests I just made (although I do see it in the demo app you linked to, so I’m guessing there’s some inefficient logic going on there)…

But if it’s happening for you the simplest way to fix it would be to switch the logic around - i.e. have the side bar not visible on page load, and only show it when the screen width is above a certain size.

3

This will do the trick. :point_up_2:

4

@adamhholmes , @rpetribu - thanks for replying. Yeah and that is exactly what I’ve done on a test page here - Your Bubble app

Screenshot 2022-06-02 at 4.33.40 PM
Screenshot 2022-06-02 at 4.33.40 PM1006×615 32.9 KB

Screenshot 2022-06-02 at 4.33.54 PM

Unless I’m missing something?

5

This is strange. Try this:

image
image420×537 51.2 KB

6

@rpetribu - Yeah I’ve tried that but it still shows briefly unfortunately. I just don’t understand why it shows when the element isn’t visible on page load?

7

Take a look here:

Link to the editor here.

8

Thanks for sending that through @rpetribu - but that still shows the sidebar onload on my phone. Here’s screen capture - https://res.cloudinary.com/dwzpczjvp/video/upload/v1654184950/RPReplay_Final1654184826_lsmcui.mp4

As soon as there’s a conditional added it shows onload regardless of if you’ve checked the “this element is visible on page load” box or not.

9

This is indeed, VERY ODD. I tested with my phone now, same result as yours, the pink group blinks for a second.

So I decided to do the same thing, but with the old responsive engine.

Do you see any difference?

Link do the editor here.

For me, at least now, it is working as expected.

ODD. :astonished:

1 Like
10

Yep, that’s a lot better! No flicker at all.

However, it’s the old engine :upside_down_face:

I might try and escalate it to bubble HQ. You don’t happen to know any of the team @'s do you?

11

This topic was automatically closed after 70 days. New replies are no longer allowed.