Tabs: Scroll bar showing sometimes

[rhurlbatt]

I have finally got round to using the tabs component and I see some strange behaviour happening where a scroll bar shows up in the tabs. I have tried to build an example app to replicate the behaviour but cannot get it to replicate the issue.

The tab title aren't too long since resizing the window still shows the full title and the scroll bar disappears.
The tab has full_width_row selected and if I click on a tab or resize the window, it disappears.

I toyed with the idea of trying to fix this by using a roll with some CSS but I am fairly sure this isn't the intended behaviour.

Any ideas on this? Is it my usage or a potential bug?

[s-cork]

See this issue

#159

Interesting you couldn't reproduce it. I wonder why? And if it disappeared in resize maybe there's something that could be added in the form show event to make it behave.

[rhurlbatt]

Thanks for the pointer and apologies I didn't find that myself.
Yeah I am not really sure. I tried a few different ways to rebuild it.
In one instance I noticed that running the debug session embedded in the IDE would make the scroll bar appear every time. Running in a new tab stopped this.

I will keep trying to reproduce it - I think it must be something to do with the full_width_row.

[lewysigns]

Similar to issue #159 I get a vertical scroll bar on zoom. I tried implementing the resolution and it didn't work. I also tried to do it for the -y direction for no avail:

  margin: 0;
  height: 100%;
  overflow: hidden !important;

Any other suggestions?

[lewysigns]

Debugging, it had something to do with the card role. I removed it and that eliminates the vertical scroll wheel.

[rhurlbatt]

Is this showing up when the app is running in debug mode within the IDE? I found this to be problematic. Running the app in debug mode in a new tab or from the published url eliminates this.

…

On Wed, 25 May 2022, 2:30 am Luis Saenz, ***@***.***> wrote: Debugging, it had something to do with the card role. I removed it and that eliminates the vertical scroll wheel. — Reply to this email directly, view it on GitHub <#300 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHTGL6B3URQ5QPMXZMUF5PDVLUN5NANCNFSM5R3WHHWA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[lewysigns]

Sorry for the late reply.

I did some digging.

This is a css issue. It only happens in the "Classic Theme" vs "Material Design"

It happens in both IDE and published application.

Here is a link to the "Same" application with both designs.

Classic:
https://anvil.works/build#clone:R62L2766LX6R23EQ=IKOXUSEEZ6A37IRHW4XOHO6Q|C6ZZPAPN4YYF5NVJ=

Material:

https://anvil.works/build#clone:67SE75XAH66KUCIR=TBFNLI2A5AZMUW2FHYIKSZYG|C6ZZPAPN4YYF5NVJ=

[NicoN13]

Any updates on this bug or potential fixes? I've applied the css as mentioned here: #159
but it only works sometimes.

[lewysigns]

Not on my end unfortunately, I just removed the "card" role form the tab and it stopped the issue.

[NicoN13]

I found a potential solution - or at least it solves the problem of the scroll bar covering the tab text.

Just paste this into your theme.css. It changes the appearance of the scroll bar such that it doesn't get in the way.

/* Customise default scrollbars */
::-webkit-scrollbar {
   width: 8px;
   height: 8px;
   padding-left: 2px;
}
 
::-webkit-scrollbar-thumb {   
  border-radius: 30px;
  background: gray;
 
::-webkit-scrollbar-track {     
  background-color: none;
  background: none;
}