[bug]: vertical separator not rendering

[OliverGilan]

Describe the bug

When using the separator with a "vertical" orientation it does not render properly. Looking at the browser dev tools it appears to have a size of 1x0 pixels.

Changing the default style here to use min-h-full instead of just h-full seems to fix this.

Seems to be the same as this issue encountered in the shadcn-svelte port

Affected component/components

Separator

How to reproduce

1. Place a Separator in a flex parent with two other components and orientation "vertical"

<div className="flex flex-row flex-nowrap gap-4 h-fit">
          <p>Foo</p>
          <Separator orientation="vertical" />
          <p>Bar</p>
 </div>

2. The separator will not appear
3. Change style within components/ui/separator.tsx

<SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        'shrink-0 bg-border',
        orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-full w-[1px]',
        className
      )}
      {...props}
    />

4. Separator will now render

Codesandbox/StackBlitz link

https://stackblitz.com/edit/stackblitz-starters-t7h9sc?file=components%2Fui%2Fseparator.tsx

Logs

No response

System Info

M2 Mac,
Firefox

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[OliverGilan]

Opened a PR to help fix this!

[TharindaPrabhath]

In my case, I had to define the height explicitly in the className prop. Then, it was displayed.

[OliverGilan]

Yes explicitly setting a height does work but the default behavior of the component should be that it fills up the height of the parent which isn't happening. Can always override that with the className prop even with this change

[TharindaPrabhath]

Yes, agree.

[gerardsiles]

it has an easy fix, on the primitive root change:

 className={cn(
    "shrink-0 bg-border",
    orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
    className,
  )}

  for:

       className={cn(
    "shrink-0 bg-border",
    orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
    className,
  )}

setting min-h-full should fix this this issue when set to vertical

[OliverGilan]

Yes that is the fix I used and it's what I have in the PR I opened for this

[KarlG-03]

doesn't seem to work if the parent is display flex and has items-center to center fields

<div className="flex space-between items-center">
  <div className="flex-1 text-sm text-center">Location</div>
  <Separator orientation="vertical" />
  <div className="flex-1 text-sm text-center">Color</div>
  <Separator orientation="vertical" />
  <div className="flex-1 text-sm text-center">Size</div>
</div>

had to go for grid

<div className="grid" style={{ gridTemplateColumns: '1fr 1px 1fr 1px 1fr' }}>
  <div className="text-sm text-center">Location</div>
  <Separator orientation="vertical" />
  <div className="text-center">Color</div>
  <Separator orientation="vertical" />
  <div className="text-center">Size</div>
</div>

[deilon]

The orientation="vertical" will not show if you add class items-center to its parent element.

Solved it by removing items-center and modifying h-full to min-h-full otherwise it still won't appear.

[sheikhameen]

When orientation="vertical", you can simply set the Separator's height to auto: h-auto. Doesn't work when parent has items-center tho.

[ld-bravo]

I had to use min-h-[] and border:

<div className="flex items-center">
          <Separator orientation="vertical" className="min-h-[35px] m-[5px] border-[1px]" />
</div>

[jcajuab]

I was using the block sidebar-08 and encountered the same issue rendering the new vertical separator with the provided code:

<div className="flex items-center gap-2 px-4">
  <Separator orientation="vertical" className="mr-2 h-4" />
</div>

I was able to fix it by updating the class like this:

<div className="flex items-center gap-2 px-4">
  <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
</div>

Hope this helps!

[DenysVuika]

This problem still happening, more than 8 months now, any plans fixing it?

[sgwrangler]

Issue (fix below)

I found the problem in my case. The parent needs a specific height for h-full to work.

// [MDN docs | height](https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility)
Percentages | The percentage is calculated with respect to the height of the generated box's containing block. **If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto**. A percentage height on the root element is relative to the initial containing block.

I confirmed this behavior with this snippet. You can add height:100%; to the parent div to see the child fill up the parent components height.

  <body>
     <div style="background-color:red;">
      My child has 0 height.
      <div style="height:100%;background-color:blue;" />
     <div>
  </body>

Fix

Either:

• overwrite element height by adding className="data-[orientation=vertical]:h-{SET_SPECIFIC_HEIGHT}" (like @jcajuab)
• specify explicitly the height of the parent container (does not need to be an absolute value, can also be a %).

@shadcn this issue can be closed.

[garlic-brewlabs]

I was unable to have success using h-full on the parent element, as suggested by @JoshuaS98

What did work (in my case) was <Separator orientation="vertical" className="data-[orientation=vertical]:h-4" /> as suggested by @jcajuab

Replication here https://bolt.new/~/sb1-pvlzdufr (see hero component there is a separator between the buttons)

[Joshua-hypt]

@garlic-brewlabs That's because your container depends on the height of it's inner content. Give the parent container an absolute height (like h-12) and it will be fixed. I literally quoted:

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto

[mohit4bug]

I tried everything, and this is what worked.

<Separator orientation="vertical" className="h-6!" />

[jjlinares]

I ran into this same issue and the parent component needs a height set which sucks if you have a dynamic height component (my case).

But most likely you don't need the Separator component, all you need is a border and some padding.

[tushar1998]

Its not possible to fix directly in shadcn there are various scenarios where it cannot work all cannot be covered. Another issue is this below wont work

<div className="border border-gray-300 rounded-md p-2 flex h-full gap-2">
    <div className="flex-1 p-2">Hello</div>
    <Separator orientation="vertical" className="h-auto" />
    <div className="flex-1 p-2">World</div>
</div>

but this below works

<div className="border border-gray-300 rounded-md p-2 flex h-full gap-2">
    <div className="flex-1 p-2">Hello</div>
    <Separator orientation="vertical" className="data-[orientation=vertical]:h-auto" />
    <div className="flex-1 p-2">World</div>
</div>

There is an issue with tailwind-merge it cannot identify custom state based dynamic styles. We need to manually check scenarios and override appropriately. Current implementation of Seperator is just fine

[sglza]

self-stretch seems to work very well

className={cn(
  'shrink-0 bg-border-divider data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',
  className
)}

[maxktz]

add self-stretch to the separator is the top solution