jQuery UI Widgets Forums Layouts Splitter Strange behavior of the elements in the jqxSplitter

This topic contains 7 replies, has 3 voices, and was last updated by  Martin 2 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • Grigoriy Grachev
    Participant

    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?


    NotAFan
    Participant

    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 Grachev
    Participant

    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/


    Martin
    Participant

    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 Grachev
    Participant

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


    NotAFan
    Participant

    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

    • This reply was modified 2 years, 1 month ago by  NotAFan.
    • This reply was modified 2 years, 1 month ago by  NotAFan.

    NotAFan
    Participant

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

    • This reply was modified 2 years, 1 month ago by  NotAFan.
    • This reply was modified 2 years, 1 month ago by  NotAFan.

    Martin
    Participant

    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/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.