Resizer not rendering

[emptycrown]

Hi,

I implemented the standard vertical split example, with two children inserted into SplitPane to be the left and right components. There so show up correctly, but the resizer bar in the middle is not there. Has anyone encountered this issue? Thanks!

[stenbln]

Same here.

[inletfetch]

same here

[brenmcnamara]

I ran into the same issue. I've noticed the problem in chrome, but not in Firefox. Haven't checked other browsers. The "height" and "width" properties are not always strongly enforced, depending on a lot of CSS nuances that I'm not that familiar with. My solution, add min-width: 11px to .Resizer.vertical and min-height: 11px to .Resizer.horizontal.

Hope this helps :)

[TAGC]

@brenmcnamara's solution partly worked for me; I get the splitter "area" (the part of the screen you can drag to resize) but I don't see a physical splitter bar.

electron@1.7.3 react-split-pane@0.1.63

[warent]

It's a valid question. I found the answer, it's just unclear in the readme. Basically it doesn't come with a style by default. However, you can find the styles used in the demo here: https://github.com/tomkp/react-split-pane/blob/master/demo/styles.css

You're expected to style the resizer

[dandonahoe]

@warent That seems like a big thing to simple leave out of the documentation. This fixed it, thanks.

[bajcmartinez]

Hi all, I get the styling piece, but do I need to have the styles defined as global? In components all styles get renamed to something like MainContainerResizer3Tq4S MainContainervertical3HQaX

I was able to change the resizer class name by doing

<SplitPane resizerClassName={styles.Resizer} split="vertical" minSize={50} defaultSize={100}>

But the vertical/horizontal I wasn't able to provide the name, any advice?

[waheed25]

I have the same issue but still, the bar is not showing after passing styles.