search

tomkp / react-split-pane

React split-pane component
https://tomkp.github.io/react-split-pane
MIT License
3.19k stars 408 forks source link

Splitter hide #279

Open jabacrack opened 6 years ago

jabacrack commented 6 years ago

Code:

<SplitPane  split="vertical" minSize={200}>
            <div>
            </div>
            <div>
                <img src='http://placekitten.com/600/800' />
            </div>
        </SplitPane>

Css:

.Resizer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: red;
  opacity: .2;
  z-index: 1;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}
.Resizer.vertical {
  width: 50px;
  /*margin: 0 -5px;*/
  /*border-left: 5px solid rgba(255, 255, 255, 0);*/
  /*border-right: 5px solid rgba(255, 255, 255, 0);*/
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}

Now drag splitter until image reach right screen border. If you continue drag, splitter step by step disappear, and after you release mouse, you cannot catch and drag it again. Issue reproduce in chrome and firefox.

ChoppinBlockParty commented 4 years ago

Have the same issue in chrome.