kor-ui/kor

Toggle label alignment problem

vinoth2442 opened this issue · 9 comments

Describe the bug
Toggle label positioned on top of the container

Desktop (please complete the following information):

  • OS - iOS
  • Browser - chrome
  • Version - 102
    I have attached screenshot
    Uploading Screen Shot 2022-06-03 at 1.38.59 PM.png…
font: var(--body-1);

Not working inside shadow dom

Hi @vinoth2442 , the screenshot is not showing up, would you mind uploading it again?

font: var(--body-1);

Not working inside shadow dom

Is kor-styles.css loaded correctly?

font: var(--body-1);

Not working inside shadow dom

Is kor-styles.css loaded correctly?

Yes loaded.
Problem here is need to add font: var(--body-1); inside :host .
It's now present inside body{}

Hi @vinoth2442 , the screenshot is not showing up, would you mind uploading it again?

Screen Shot 2022-06-03 at 1 38 59 PM

any update about this issue?

any update about this issue?

Hi, I investigated the issue and it doesn't seem like the --body-1 font declaration is related to that, because even when I force font: unset; it still doesn't get misaligned.

The only way I found to reproduce the issue was applying css align-items: baseline;, so in this case could you please confirm that there is no interfering css inherited by the kor-toggle element?

If you have a link to the repo or code snippet I'd be happy to take a look as well.

image

host([size="body-1"]) {} is empty