Strange behavior of the elements in the jqxSplitter

[Grigoriy GrachevParticipant]

I have two panels in the vertical jqxSplitter.
On the left side I have simple div (top-div) and jqxgrid.
The right side is just div.

All works fine. But, it is a problem when I edit any cell in grid, then click the top-div. There are no handlers on the top-div, but it disappears.

Here is the problem http://jsfiddle.net/Z6WHX/302/

The problem is in JQuery and Angular versions.

How to fix it?

[NotAFanParticipant]

Hello Grigoriy,
I just came across the same problem. Seems to be a bug in the edit function of the grid. I found a simple but effective workaround: Wrap the Grid’s div with another div container. That works for me. Hope this helps you.

<div>
    <div id="grid"></div>
</div>

Best Regards
Dirk

[Grigoriy GrachevParticipant]

Thank you for the answer. I had tried to do this wrapper. But it doesn’t help. Could you show, how to do it? http://jsfiddle.net/Z6WHX/302/

[MartinParticipant]

Hello Grigoriy,

You should just set the height property of the grid, so it doesn’t change when a cell is edited.
Here is the updated Example.

Best Regards,
Martin

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

[Grigoriy GrachevParticipant]

Thank you, Martin. I hope, it is a temporary solution, and this bug will be fixed.

[NotAFanParticipant]

Hello Martin,
this only works with fixed height – not with a percentage height.
It also appears without using Splitter. I have already given up to use the splitter in my application because of couple of bugs I found in it(for example, the button is buggy).

In my program I have to use an absolutely fixed menu line above an 3 or more Container side by side in the main-area. It only seems to work if you work with several nested DIV containers. All of them need height 100%. The most basic MUST encompass the entire page and may not have any absolute placement.

Here is my html:

<div class="Menu">
   Here are the menu-elements...
</div>
<div class="MyMainArea"> 
       <div class="Page">
                <div class="MainPanel_CENTER">                
                    <div class="MainPanelContent_CENTER">
                        <div class="ButtonArea" >
                              some Controls...
                        </div>
                        <div style="clear:both;"></div>
                        <div class="hevTable" ></div>
                    </div> 
               </div> <!--End MainPanelCenter --> 
      </div> <!--End Page -->
</div><!--End MyMainArea-->

And here the css:

.Menu{
    top: 0px;
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: #004a96;
    margin-bottom: 45px;
    z-index: 10000;
}
.MyMainArea{
    overflow: hidden; 
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    
}
.Page{
   height: 100%;
   width: 100%; 
   top: 125px;
   position: absolute;
   background-color: #d3d3d3;
}
.MainPanel_CENTER{
    position: absolute;
    left :350px;
    right: 500px;
    height : 100%;
    background-color: #ffffff; 
    
}
.MainPanelContent_CENTER{  
   height: 100%;
   width: 100%; 
}

If you have some suggestions for a better way…

Best Regards
Dirk

[NotAFanParticipant]

The error stil exists in chrome. Firefox & Edge seems to be fine with my solution.
The error also occurs with the treegrid.

[MartinParticipant]

Hello Grigoriy and Graywizzard,

Thank you for your feedback!
As an additional workaround I would suggest you to use another splitter inside to separate the grid from the other content.
I will create a work item for this issue, so it can be fixed in the future.

Best Regards,
Martin

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

[Author]

Posts