taiga-ui icon indicating copy to clipboard operation
taiga-ui copied to clipboard

[BUG] axes bar Tooltip shifts to the side if i change font-size html

Open AnteaterKit opened this issue 3 years ago • 5 comments

🐞 Bug report

Description

axes bar Tooltip shifts to the side if i change font-size html

Reproduction

  1. open https://taiga-ui.dev/components/axes
  2. open devtools
  3. change html font-size 10px
  4. put mouse on the bar
Screenshot 2021-07-27 at 20 36 17

If default html font size 16px, it's ok Screenshot 2021-07-27 at 20 37 48

for one array item look font size 10px : Screenshot 2021-07-27 at 20 50 30

AnteaterKit avatar Jul 27 '21 17:07 AnteaterKit

Hello @waterplea, i think it depends of ARROWHEAD_OFFSET. The default font-size is 16px, it's ok work with const ARROW_SIZE = 8; const ARROW_OFFSET = 16;

But I got the project where responsive font-size. Do you think to create dynamic calc like this for the TuiHintBoxComponent const fontOffsetPx = document.....fontSize; const fontOffset = fontOffsetPx ? +document.documentElement.style.fontSize.replace('px', '') : 16; const realOffset = 21 * fontOffset / 16; const verticalLeft = hostRect.left - tooltipRect.width + hostRect.width / 2 + realOffset - portalRect.left;

or may by allow make @Input ARROW_OFFSET / ARROW_SIZE for customise

AnteaterKit avatar Jul 30 '21 15:07 AnteaterKit

I think the most reasonable fix would be to change ::before positioning of tui-hint-box (the arrow) back to pixels. Shouldn't matter that much visually but it would allow us to keep the same math since positioning is done with ClientRect which is in pixels.

waterplea avatar Aug 03 '21 14:08 waterplea

@AnteaterKit would you like to contribute?

waterplea avatar Aug 28 '21 15:08 waterplea

I'm on vacation now. After rest, i'll return to this issue

AnteaterKit avatar Aug 28 '21 18:08 AnteaterKit

@AnteaterKit are you up for a PR? :)

waterplea avatar Jan 20 '22 16:01 waterplea

Fixed in 3.0

waterplea avatar Sep 30 '22 09:09 waterplea