problem with scrollbar size

[keremciu]

hi, we're always showing scrollbar inside our tables and right now if there's no mouse plugged to the computer, our gridtables height computation looks problematic.

If could be a change to add a prop for this? like defaultScrollbarSize? cause I don't see any other solution to make getScrollbarSize util get this size always.

[nihgwu]

hi, I think the problem will only happens if your mouse is plugged and the table is rendered, and then you unplugged your mouse, the scrollbar's size doesn't been updated as there is no way to detect it, in other cases the size should be correct, am I correct? or there should a bug, could you share a screenshot?

yes I'm going to add a new prop called getScrollbarSize to cover that use case

[keremciu]

Hi, the problem is our product team decided to show scrollbar always and scrollbarSize returning 0 on this case but normally I'm allocating that area by css. Somehow I've this problematic view. I rendered the page while there's no mouse plugged and just scrolled down after that.

[nihgwu]

what's the version of BaseTable? I suspect it's related to #22 which is fixed in 1.2.1, but the bug should only happens in 1.2.0 with SSR

I payed a lot of attention on the scrollbar size, so it's safe to show scrollbar when it's needed, just wandering how do you make the scrollbar always visible, via style overriding?

BTW, does #33 covers your needs, I'll release a new version soon

[keremciu]

@nihgwu I'm using 1.2.2 yep it's all about style overriding when I took back the code then it's working perfectly, you can test it on your own with this css:

export const scrollable = css`
	overflow-x: auto;
	overflow-y: hidden;
	::-webkit-scrollbar {
		-webkit-appearance: none;
	}

	::-webkit-scrollbar:vertical {
		width: 11px;
	}

	::-webkit-scrollbar:horizontal {
		height: 11px;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 8px;
		border: 2px solid white; /* should match background, can't be transparent */
		background-color: rgba(0, 0, 0, 0.5);
	}
`
.BaseTable__table.BaseTable__table-frozen-left .BaseTable__body,
.BaseTable__table.BaseTable__table-frozen-right .BaseTable__body,
.BaseTable__table.BaseTable__table-main .BaseTable__body {
    ${scrollable};
}

[nihgwu]

thanks, i understand now, I've released v1.3.0 with the new getScrollbarSize, hope that would solve your problem

[nihgwu]

So your target is only webkit based browser? I think that's a good scenario for custom scrollbar support I'm thinking about

[keremciu]

@nihgwu thank you so much! I returned 11 always from getScrollbarSize and it works like a charm now. I think you can use this one as an example, it could be a case for some products.

yep, only webkit based browsers but no need to sniff browser for this.

[nihgwu]

OK, thanks for your feedback, I'll add a demo for that later, your table looks awesome 👍

[keremciu]

@nihgwu fyi

on iPad there was problem about showing scrollbars, that's why we decided to add a browser sniff code

const getScrollbarSize = () => {
  const userAgent = window.navigator.userAgent
  let scrollbarSize = 16

  if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
    scrollbarSize = 0
  }

  return scrollbarSize
}

[nihgwu]

@keremciu thanks, I'll check, that's interesting as I think the default getScrollbarSize should return 0 on iPad, yours didn't because you hard coded it