Strange White Bars

[Jonny]

Hi guys - I have a very strange issue occuring. When I am building and testing in my display, I see things looks great. Heres and image example:

My client logs in and shows me his dashboard, and it has these strange white bars near lists going on. I asked him to shrink his screen and try it on a smaller screen and its the same white bars for him. I have no way of replicating his issue in my dash because its not happening in there… Anyone ever experience this?

As far as I can tell, its stretching to the view within those lists…

[Broberto]

Try setting the overflow to auto on those elements, seem like you have overflows turned on scroll. If that’s not the reason then if you posted an example url, that would help

[Jonny]

@Broberto the url would be app.samuraichat.com but you would just have to make an account lol!

[Broberto]

I tried that rn but I’m unable to verify my account. Also your login workflow doesnt show any errors, so if I wasn’t a WeWeb developer, I wouldn’t know that I gotta verify my mail, as no error message is shown and nothing happens.

You need to set up your redirect URL to weweb urls in Supabase Auth instead of localhost

[Jonny]

@Broberto For sure! I just added my domain the other day its on my list… In that case, let me as k my client is he can see my newest publish with “auto” scrolling

[Broberto]

You might want to check what browser he uses, and what screen size and run it “emulate” it on your own device. If you fix the confirmation, I can have a look at it also Just ping me if that’s needed.

[Jonny]

@Broberto Just changed my url in supabase… give it a whirl now if you dont mind!

[Broberto]

I’m still unable to login, could you check if my account hello@broberto.sk is verified in supabase?

Edit: I got the Magic Link, checked your app and I no longer see the overflow scroll thingies. Only on this element. Once you set them all to auto, it will appear only on the axis that is overflowing (for example overflow-y or overflow-x).

You can also disable this in weweb and set it via custom CSS only on one of the axes, might be a nice feature to have these two separated, instead of one setting only @Joyce might be a feedback for the team, I see this quite often

You might also want to use paths for your app, so it stays on the section knowledge for example, when i refresh. Now it just goes to the dashboard.

[Jonny]

@Broberto thanks for the help but my client said its gotten even worse! Hes now not able to see anything in the dropdown at all and teh scrolling looks very weird…

[Jonny]

@Broberto Also he said he is using chrome (which im using with no issues) and he has a 32" ULTRAwide screen.

Also, looking at your screenshot (the one with knowledge on it) looks as though you have the issue as well??? Im not sure what that grey bar is and why its showing at all? @Joyce do you have any thoughts here?

[aurelie]

What you are seeing is scrollbars, there are different approaches

• Change the size of your element so that no scrollbar is needed
• Change the overflow property to display or not these scrollbars
• Change the style of your scrollbar to something less ugly (these are the native ones here)

[Joyce]

Hi @Jonny

Were you able to find the CSS property values that worked for you?

The overflow property @aurelie was referring to can be found in the style tab of your elements:

If not, you might want to jump in the next Office Hours with Q and Flo.