I personally prefer finer lines, but decresing the size of the splitter line also make

Suggestion: Line width independent of actual width about react-splitter-layout HOT 1 OPEN

5cript commented on July 26, 2024 1

Suggestion: Line width independent of actual width

from react-splitter-layout.

Comments (1)

nathggns commented on July 26, 2024 2

In lieu of a first party solution to this, you can achieve it with a bit of custom CSS.

.container {
  --splitter-hit-area: 7px;
  --splitter-visible-area: 1px;
  --splitter-hit-offset: calc(
    -1 * ((var(--splitter-hit-area) - var(--splitter-visible-area)) / 2)
  );
}

.container .splitter-layout > .layout-splitter {
  width: var(--splitter-visible-area);
  background: blue;
  z-index: 2;
  position: relative;
}

.container .splitter-layout > .layout-splitter:before {
  content: "";
  display: block;
  width: var(--splitter-hit-area);
  position: absolute;
  left: var(--splitter-hit-offset);
  top: 0;
  height: 100%;
}

.container .splitter-layout > .layout-splitter:hover,
.container .splitter-layout > .layout-splitter:hover:before {
  background: red;
}

.container .splitter-layout.layout-changing > .layout-splitter,
.container .splitter-layout.layout-changing > .layout-splitter:before {
  background: green;
}

.container .splitter-layout.splitter-layout-vertical > .layout-splitter {
  height: var(--splitter-visible-area);
}

.container
  .splitter-layout.splitter-layout-vertical
  > .layout-splitter:before {
  width: 100%;
  height: var(--splitter-hit-area);
  top: var(--splitter-hit-offset);
  left: 0;
}