CODEWITHSUNDEEP
vuejs3tailwind-cssshadcnuiradix-ui
vikiJ
vikiJ

Reputation: 11

Radix-vue switch layout breaks

I use 3 shadcn and Tailwind in my Vue 3 project. I added styles to the switch component from shadcn, but it does not behave as expected. When switching to the active state, the SwitchThumb may move down or up.

For example, in a form I use two switches in a row and one of them breaks
enter image description here

Part of code from form

                <FormField v-slot="{ value, handleChange }" name="On1">
                  <FormItem>
                    <div class="flex gap-3 items-center">
                      <FormControl>
                        <Switch :checked="value" @update:checked="handleChange" />
                      </FormControl>
                      <FormLabel class="inline text-base"> 111 </FormLabel>
                    </div>
                  </FormItem>
                </FormField>

                <FormField v-slot="{ value, handleChange }" name="use1">
                  <FormItem>
                    <div class="flex gap-3 items-center">
                      <FormControl>
                        <Switch :checked="value" @update:checked="handleChange" />
                      </FormControl>
                      <FormLabel class="inline text-base"> 222 </FormLabel>
                    </div>
                  </FormItem>
                </FormField>

elsewhere I use one switch, but it is also crooked
enter image description here

Code of Switch

<template>
  <SwitchRoot
    v-bind="forwarded"
    :class="
      cn(
        `peer  bg-monochrome-2.5  h-4 w-7  cursor-pointer  transition-colors  rounded-3
          focus-visible:outline-monochrome-9
         disabled:cursor-not-allowed
         data-[state=checked]:bg-success-1`,
        props.class,
      )
    "
  >
    <SwitchThumb
      :class="
        cn(
          `pointer-events-none bg-monochrome-6 block h-[14.7px] w-[14px]  transition-transform rounded-[3px]
           data-[state=checked]:translate-x-[13px]  data-[state=checked]:bg-monochrome-1 data-[state=unchecked]:translate-x-[0.8px] `,
        )
      "
    />
  </SwitchRoot>
</template>

How can I make the switch look equally beautiful under any circumstances?

I tried to remove the limitation on the height of the switch so that the height would be generated automatically and added paddings at the top and bottom.

Code

<template>
  <SwitchRoot
    v-bind="forwarded"
    :checked="checked"
    :disabled="disabled"
    :class="
      cn(
        `peer  bg-monochrome-2.5 w-7  cursor-pointer  transition-colors  rounded-3
          focus-visible:outline-monochrome-9
         disabled:cursor-not-allowed
         data-[state=checked]:bg-success-1`,
        props.class,
      )
    "
  >
    <div class="py-[0.85px]">
      <SwitchThumb
        :class="
          cn(
            `pointer-events-none bg-monochrome-6 block h-[14.7px] w-[14px]  transition-transform rounded-[3px]
           data-[state=checked]:translate-x-[13px]  data-[state=checked]:bg-monochrome-1 data-[state=unchecked]:translate-x-[0.8px] `,
          )
        "
      />
    </div>
  </SwitchRoot>
</template>

It worked for the small screen but didn't work for the big one

enter image description here

enter image description here

And now I have no idea

Upvotes: 0

Views: 247

Answers (1)

Pinal Tilva
Pinal Tilva

Reputation: 848

Update your switch component as bellow:

<template>
  <SwitchRoot v-bind="forwarded" :class="cn(
    'peer bg-monochrome-2.5 h-4 w-7 cursor-pointer rounded-[4px] transition-colors focus-visible:outline-monochrome-9 disabled:cursor-not-allowed data-[state=checked]:bg-success-1',
    props.class
  )
    ">
    <SwitchThumb :class="cn(
    'pointer-events-none bg-monochrome-6 block h-[14px] w-[14px] transition-transform rounded-[3px] data-[state=checked]:translate-x-[13px]  data-[state=checked]:bg-monochrome-1 data-[state=unchecked]:translate-x-[1px]'
  )
    " />
  </SwitchRoot>
</template>

If you are still facing issue then it might be causing by some other css

Upvotes: 0

Related Questions