jqxSplitter for React issues

[vmlaskinBlocked]

I run to some issues with jqxSplitter component and I am hopping you will help me to understand what is wrong.
Test application was ran with JQWidgets v.5.0.0 in chrome 60.0.3112.101 (Official Build) (64-bit).
Code for test app is below after issues description.

1. Scrollbars appear when holding left mouse down on splitter bar.
How to replicate:
1. run app
2. Maximize browser window
3. click and hold left mouse on splitter bar
4. It works as expected
5. Restore Down browser window
6. click and hold left mouse on splitter bar
7. Scrollbars appear
8. If scrollbars is not appeared in p.7 then try to resize browser window and go to p.6

2. Panels under jqxSplitter are flickering after moving splitter bar
How to replicate
1. run app
2. Maximize browser window
3. Hold and move vertical splitter bar between “tree” and “center” panels
4. When splitter bar is released, watch at right panels (“info”, “errors grid”,..). They are flickering at this moment.
5. If issue is not appeared then try to move spliiter bar to left and right several times (p.3, p.4)

3. jqxSplitter doesn’t calculate width and height of panels with borders correctly
How to replicate
1. run app
2. Right and bottom sides of spliiter panels borders are not visible

Below is code for test app

import React from 'react';
import ReactDOM from 'react-dom';
import "./treeSplitter.css"
import JqxSplitter from './jqwidgets-react/react_jqxsplitter';

class App extends React.Component {

    componentDidMount(){
        this.splitter.theme('classic');

    }

    render() {

        return (
            <div className="appMainArea">

                <JqxSplitter ref={t => this.splitter = t}
                             width={'100%'} height={'100%'}
                             orientation={'vertical'}
                             panels={[{size: 200}]}
                >
                    <div className="appMainTreeView">
                        Tree Panel
                    </div>
                    <div>
                        <JqxSplitter
                            width={'100%'} height={'100%'}
                            orientation={'vertical'}
                            panels={[{size: '70%', collapsible: false}, {size: '30%'}]}
                        >
                            <div className="appMainCenter" ref={t => this.divCenter = t}>
                                Center
                            </div>
                            <div>
                                <div className="appMainRightSideInf" ref={t => this.divInfo = t}>
                                    Info
                                </div>
                                <div className="appMainRightSideErr">
                                    <JqxSplitter ref={t => this.splitErrors = t}
                                                 width={'100%'} height={'100%'}
                                                 orientation={'horizontal'}
                                                 panels={[{size: '50%'}, {size: '50%'}]}
                                    >
                                        <div className="appMainRightSideErrors">
                                            Errors grid
                                        </div>
                                        <div className="appMainRightSideResponses">
                                            Errors detail
                                        </div>
                                    </JqxSplitter>
                                </div>
                            </div>
                        </JqxSplitter>
                    </div>
                </JqxSplitter>
            </div>
        )
    }
}
export default App;

Below is CSS file

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html{
    height: 100%;
    width: 100%;
    /*background:  url("../images/background.png");*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #adadad;

}

.appMainArea{
    position:absolute;
    height:auto;
    bottom:12px;
    top:12px;
    left:12px;
    right:12px;
    display: block;
    /*border: 2px orange solid;*/
}
.appMainArea *{
    box-sizing: border-box;
}

.appMainTreeView{
    margin: 0px;
    width: 100%;
    height: 100%;
    border: 2px orange solid;
    background-color: #f4f4f4;
}
.appMainCenter {
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 2px orange solid;
    background-color: #d3d3d3;
}
.appMainRightSideInf{
    background-color: #f4f4f4;
    height:100px;
    border: 2px orange solid;
}
.appMainRightSideErr{
    position: absolute;
    top:100px;
    bottom:0px;
    right: 0;
    left:0;
    background-color: #f4f4f4;
}

.appMainRightSideErrors{
    position: absolute;
    top:0px;
    bottom:0px;
    right: 0;
    left:0;
    background-color: #f4f4f4;
    border: 2px orange solid;
    border-top: 0;
}

.appMainRightSideResponses{
    position: absolute;
    top:0px;
    bottom:0px;
    right: 0;
    left:0;
    background-color: #f4f4f4;
    border: 2px orange solid;
}

[Ivo ZhulevParticipant]

Hi vmlaskin,

I tested your example with create-jqwidgets-react-app.
I copy pasted your code(no changes).

I could not reproduce 1 and 3. The second one is a known issue of the splitter and is due to be fixed in upcoming releases.
Maybe I’ve done something wrong to not able to reproduce 1 and 3. Maybe send me some short video showing this issues?

Regards,
Ivo

[vmlaskinBlocked]

Hi Ivo,

Thank you for your response.
I am new to this forum. Are you from jqwidgets support team? In your post it says that you are Participant.
Do you happen to know when upcoming release will be available?

How do you want me to send you video? what email address?

Regards,

[vmlaskinBlocked]

here is link to video for issues #1 and #3
https://www.screencast.com/t/gcJxqKN41Lrg

[Ivo ZhulevParticipant]

Hi vmlaskin,

Well as I see what are you doing I did the same and couldn’t get the scrollbars.
As for the borders if you mean where the spliiter bar is its normal behaviour.

Hmm, first try getting jqwidgets 5.1 and try with them.
Final resort is to send me your project in a zip file to see if there are any other differences.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[vmlaskinBlocked]

Hi Ivo,

I created new project with create-jqwidgets-react-app with jqwidgets 5.1 and run the same code that is in earlier post. The result is the same. Scrollbars appear when I holding mouse down on splitter bars. I think that the problem with scrollbars is related to wrong width/height rounding when when app is running with certain display resolutions. I found workaround to this problem. It works fine when overflow is set to hidden in parent div container.
I still think that the root of the issue should be found and addressed.

You didn’t answer when issue #2 (screen flickering) is going to be fixed.

Regards,

[Ivo ZhulevParticipant]

Hi vmlaskin,

I can’t give you a deadline for this. We have other priority tasks to be done first.
It’s noted so it will be fixed.

Regards,
Ivo

[Author]

Posts