zesik / react-splitter-layout Goto Github PK

FEATURE REQUEST:
Currently panel areas (what you call layout-pane) cannot be resized using code, one must actually drag the separators on the UI.

For example, I expected forcing a re-render for the component to re-adjust initial size.

<SplitterLayout vertical percentage={true} secondaryInitialSize={this.state.bottomPanelSizePct} secondaryMinSize={8} primaryMinSize={4} >
	<div className="editor">
		Top Panel
	</div>
	<div className="editor">
		Bottom Panel
	</div>
</SplitterLayout>

It appears one must actually unmount the component, then mount it again, with a new secondaryInitialSize, for the size re-adjustment to be possible from code.

It should be possible to just re-render the component, and change the sizes without Unmounting?

Hi,

I have a layout where I'd like to initially position the splitter using flex (with a flex-basis set to auto to make it dependant on its content). But currently it's not possible as SplitterLayout forcibly sets a calculated or provided height (or width), unless I missed something.

I place SplitterLayout in devextreme Popup component and Splitter inside it does not work now (but shown).
Any suggestions?

It is nice to have secondaryInitialSize but I want to start with the first pane having 200px of height... A primaryInitialSize should solve :D

You can set the size of the secondary window using secondaryInitialSize parameter. However, I can't seem to figure out how to change this once the component is loaded? I have set the size to a state variable, but updating the variable doesn't change the size.

Is there anyway to change this after the component /page is loaded?

I am confused on how to make nested panes like the ones shown in your example here: https://zesik.com/react-splitter-layout/#/nested

Can you please show code for a working example to get beyond the 2 allowed panes?

I am trying to update the size of the primary and secondary panes after they are loaded initially. I want it to accept props and change accordingly.

I have written code in my local machine. I think i can commit to a new branch in here.
Please let me know if i can contribute same.
Thanks

Can you forward classNames to SplitterLayout?

<SplitterLayout className="myownclass"> ... </SplitterLayout>

I'm currently expanding my application to be server side rendered and I'm running into an issue with the splitter because of the window requirement at the moment. I will take a look at it and see what I can come up with, if nobody has any suggestions.

Hi,

Thanks for your useful and simple library.

I'm looking for a way to update height of the panel programmatically but it seems like there is no "controlled" mode.

So how to do it ?

Hi,
I have single reactjs web page where I have implemented splitter. I have two layouts for splitter like horizontal and vertical with showing same set of reactjs components. My problem is : my reactjs components re-render when user changes splitter from vertical to horizontal or vice versa. Because of re-rendering on splitter changes, user losing entered information on all input fields. Is there a way to persist user entered information on input fields during splitter layout is changed?
thanks
Arif

Hi,
Please remove dependency from prop-types package. It is unnecessary making the product heavy.

Have a look at https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types

Thanks,
Satish

Make this compatible with react 18.2.0?

Hi,
Can you please show me some example of styles overriding of drag-bar.

All events is not called: onDragStart, onDragEnd, onSecondaryPaneSizeChange. Version 4.0.

The drag down only works if I give my iframe top 50px or more. anything less than 50px second div gets stuck while dragging down. it starts again when clicked outside of SplitterLayout area.

I think this is due to some hight calculation in SplitterLayout but not able to figure out what style should I apply in my CSS in order to fix this.

drag up is working properly.

<SplitterLayout
            vertical
            percentage
            primaryIndex={0}
            secondaryInitialSize={100}
          >
            <div className="test-case-status">
              <button className="btn btn-xs btn-link close-result">Close</button>
              <div className="test-case-ins">
                 first pane text
              </div>
            </div>
            <div>
               <iframe
                  src={this.state.url}
                  width="100%"
                  height="100%"
                  frameBorder="0"
                  onLoad={this.onIframeLoaded}
                  ref={(c) => { this.iframeControl = c; }}
               />  
           <div>
</SplitterLayout>

When dragging, width should respect at not be smaller than the minimum width set via CSS. Otherwise, if that CSS property is removed after a drag, then the box will suddenly resize to whatever it would've been set to were that min-width not there – this is visually confusing.

This is a really nice library and I am using react-splitter-layout.
I set percentage prop true, but I would like to set primaryMinSize using px (like, 100px).
Is is possible?
Thank you for reading.

example of what I want to do.

<SplitterLayout vertical percentage secondaryInitialSize={80} primaryMinSize="100px">

I wanted to use it on IE 10 but it wasn't working because it use flex attribute.

I overwrite the css classes if you are interested in using it in old browsers :).

.splitter-layout {
    position: absolute;

    display: -ms-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: row;
    flex-direction: -webkit-row;
    flex-direction: -moz-row;
    flex-direction: row;

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.splitter-layout .layout-pane {
    position: relative;

    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    overflow: auto;
}

.splitter-layout .layout-pane.layout-pane-primary {
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.splitter-layout>.layout-splitter {

    -webkit-flex: 0 0 auto;
    -moz-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    width: 4px;
    height: 100%;
    cursor: col-resize;
    background-color: #ccc;
}

.splitter-layout .layout-splitter:hover {
    background-color: #bbb;
}

.splitter-layout.layout-changing {
    cursor: col-resize;
}

.splitter-layout.layout-changing>.layout-splitter {
    background-color: #aaa;
}

.splitter-layout.splitter-layout-vertical {
    -ms-flex-direction: column;
    flex-direction: -webkit-column;
    flex-direction: -moz-column;
    flex-direction: column;
}

.splitter-layout.splitter-layout-vertical.layout-changing {
    cursor: row-resize;
}

.splitter-layout.splitter-layout-vertical>.layout-splitter {
    width: 100%;
    height: 4px;
    cursor: row-resize;
}

Since Webpack 4 the webpack folks recommend using mini-css-extract-plugin to extract the CSS data into its own file. But this doesn't work well with this library. I think that's because the distributed version is a compiled version. I don't know if there's an easy fix for this but you may have an idea...

How can I hide a pane but the component inside can still be rendered?
Something like

<SplitterLayout primaryIndex={0}>
  <div hidden={true}>to be hidden</div>
  <div>2nd</div>
</SplitterLayout>

Thank you.

First of all I wanted to thank you for this awesome library!

I'm creating a single page web app much like the standard horizontal layout example and it looks like the text within the <pre> tags doesn't wrap like the text within a <p> tag. What would I alter in the CSS to achieve this effect?

When used in an environment where the component gets pre-rendered on the server it fails since
the window object is not defined.

Functions like componentDidMount will not be called on the server so it would be possible to either use the window object in there or add some conditionals to it.

Hello,

does it look like this repository is no longer maintained?
There have been some open PRs for months.

I did a quick test to see if right to left (RTL) languages are supported by going to the demo page and adding dir="rtl" as follows:

While the layout was correct, dragging the splitter on the horizontal splitter moved the splitter in the opposite direction. This is a "NO GO" for many who wish to support RTL languages and it's a shame because the fix can be an easy one so it's worth it.

That asid - Good job 👍

I personally prefer finer lines, but decresing the size of the splitter line also makes the area where you can click smaller.

It'd be great if the actual line that you can click can be of any size, which contains another rectangle thats the actual line (another color), so that you dont have to be pixel perfect for clicking it.

This is great but I do not get why there are no props to close a pane dynamically.

Unless I am missing something. I want to hide a pane when I set a prop to show or hide it.

I tried this on my mobile and it doesn't look like it works. I even blew the slider up to a really large size (100px) to make sure I was grabbing it but it doesn't appear to actually slide the panels.

Am I missing something?

I try to conditionally use the splitter component: in some cases I don't want to display the secondary pane.

To do this, I set secondaryInitialSize to 0. This doesn't work if I set it to 0 and in a subsequent render set it to something else (like 25). For a reason I don't completely get yet, it works in the opposite direction.

I want to stop dragging or set maximum size on secondary layout at certain condition. I searched on the library but I couldn't find the solution . Please do some

Hi,

I am facing a big challenge on resizing the pane using splitter when the right pane contains the IFrame. It's the same issue on IE,Chrome and Firefox.
kindly help me to get through the issue. Thanks.

How could I add text to the separator?

Is this plugin not supported in IE 11? But I find the demo page loads fine in IE 11. But in my projects, I added splitter layout. But its not working in IE. any polyfill needs to be added for IE?

Hello, i just want to split the layout and disable the separator, there should be a line in between but it should not be a re sizable pane how i can do that ?

Is it intended or a oversight that setting an arbitrarily large secondaryInitialSize can cause the initial primary size to be less than the specified minimum (even to the point becoming 0?)

I can probably prepare a PR to correct this, if desired.

I want a way to not have scrolling on the layout-pane. I want to implement my own scrolling and I am able to but 2 scroll bars appear, one from layout-pane.
PS - new to react, JS and front end development in general, so there might be a very obvious way to do it which I could be missing. Help would be very appreciated.

Something minor but the description of onDragEnd is not updated after copied from onDragStart.

Delete this. Issue resolved.

I am getting a javascript error in IE 11 console as soon as I import this component, I don`t even need to use it.
I get SCRIPT1002: Syntax error pointing to a line in my bundle.js file.

/***/ "./node_modules/react-splitter-layout/lib/index.js":
/*!*********************************************************!*\
  !*** ./node_modules/react-splitter-layout/lib/index.js ***!
  \*********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("!(function(e, t) {\n   true\n    ? (module.exports = t(__webpack_require__(/*! react */ \"./node_modules/react/index.js\"), __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\")))\n    : undefined;\n})(this, function(e, t) {\n  return (function(e) {\n    function t(r) {\n      if (n[r]) return n[r].exports;\n      var o = (n[r] = { i: r, l: !1, exports: {} });\n      return e[r].call(o.exports, o, o.exports, t), (o.l = !0), o. ...

*** UPDATE ***
I used your source code to recreate local components and when I do this it works perfectly. This makes me think that the issue concerns how the source code was compiled/Babeled into ES5.

Thank you for your useful library, Is it possible to add a toggle button on the separator line in position: 50% ,in order to show and hide?

I'm using the component with secondaryInitialSize={window.visualViewport.width - 356}. I also tried to set secondaryInitialSize={1000}. Most of the time it works just fine but sometimes the secondary get with value of 0 and the primary spreads on the entire screen.

Note:
Those are the other props values I use:

<SplitterLayout primaryMinSize={isMobile ? 30 : 10} secondaryMinSize={500} secondaryInitialSize={window.visualViewport.width - 356} percentage={false}>

At the image you can see that the right container width is for some reason set to 0px.

I'm struggling to use the new version with ReactJS via Typescript, do you have a simple pointers?

Also no description of release changes, are there breaking changes ?
am I missing something ?