jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 12 years, 5 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
Author

Strange effect with scrollbar Posts
January 3, 2013 at 1:52 pm Strange effect with scrollbar #13069
Member
Hi,
I have an application with menu, two grids, splitter and big popup Window. Popup window opens if I click on one menu item .
I’ve noticed following strange effect. I start my application, then I open Popup Window and close it. After this, if i click somewhere in my browser window with mouse (left or right button – doesn’t matter), a small scrollbar appears in the middle of my browser window and after about 1 second disappears again. What can it be?
I suspect it has something to do with popup window, I’m not sure, but without popup window I can’t see this effect.
Is there any redraw-event bound on mouse click? Is it possible to unbind them?
I use jqWidgets 2.5, I tryed it on Google Chrome and Firefox, in both browsers I can see this effect.
January 4, 2013 at 7:01 am Strange effect with scrollbar #13109
Dimitar
Participant
Hello Michael76,
Could you, please, provide us with a code sample, which we may test locally?
Best Regards,
Dimitar
jQWidgets team
http://www.jqwidgets.com/
January 4, 2013 at 2:45 pm Strange effect with scrollbar #13129
Michael76
Member
Hi Dimitar,
please try out the following code. It is not the same what I described in the first post but very similar.Start app, then click somewhere with mouse (left or rigt button). Right scrollbar appears and disappears.
<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
        <script type="text/javascript">
            var theme ="ui-sunny"; 
            var url = "myurl";
            var currentDate =Date();
            var sourceav;
            var sourcerckm;
            var sourcekap;
            var source1;
               
            var dataAdapterav;
            var dataAdapterRckm;
            var dataAdapterkap;
            var dataAdapter1;
            
            var recordskap;
            function defineDS () {
                sourceav =
                    {
                    datatype: "xml",
                    type:"GET",
                    datafields: [
                        { name: 'Field1', type:'string'},
                        { name: 'Field2', type:'string' },
                        { name: 'Field3' , type:'string'},
                        { name: 'Field4', type: 'float' },
                        { name: 'Field5', type: 'float' },
                        { name: 'Field6' , type: 'DATE'  },
                        { name: 'Field7', type: 'DATE'  },
                        { name: 'Field8'},
                        { name: 'Field9' },
                        { name: 'Field10'  },
                        { name: 'Field11'},
                        { name: 'Field12'},
                        { name: 'Field13' },
                        { name: 'Field14'  }
                    ],
                    async: false,
                    root: "root",
                    record: "ROW",
                    pagesize:20,
                    url: url
                };
                dataAdapterav = new $.jqx.dataAdapter(sourceav);
                
                
                sourcerckm =
                    {
                    datatype: "xml",
                    type:"GET",
                    datafields: [
                        { name: 'Field1', type:'string'},
                        { name: 'Field2', type:'string' },
                        { name: 'Field3' , type:'string'},
                        { name: 'Field4', type: 'float' },
                        { name: 'Field5', type: 'float' },
                        { name: 'Field6' , type: 'DATE'  },
                        { name: 'Field7', type: 'DATE'  },
                        { name: 'Field8'},
                        { name: 'Field9' },
                        { name: 'Field10' },
                        { name: 'Field11'},
                        { name: 'Field12'},
                        { name: 'Field13' },
                        { name: 'Field14'  }
                    ],
                    async: false,
                    root: "root",
                    record: "ROW",
                    url: url
                };
                dataAdapterRckm = new $.jqx.dataAdapter(sourcerckm );
                
                source1 =
                    {
                    datatype: "xml",
                    datafields: [
                        { name: 'Field1'},
                        { name: 'Field2'}
                    ],
                    root: "root",
                    record: "ROW",
                    id: 'Field1',
                    url: url
                };
                dataAdapter1 = new $.jqx.dataAdapter(source1, { async: false });  
                
                sourcekap =
                    {
                    datatype: "xml",
                    type:"GET",
                    datafields: [
                        { name: 'Field1'},
                        { name: 'Field2'},
                        { name: 'Field3'},
                        { name: 'Field4' }
                    ],
                    async: false,
                    root: "root",
                    record: "ROW",
                    url: url,
                    
                };
                dataAdapterkap = new $.jqx.dataAdapter(sourcekap);
                dataAdapterkap.dataBind();
                recordskap = dataAdapterkap.getRecordsHierarchy('Field1', 'Field2', 'items', [{ name: 'Field3', map: 'label'}, {name: 'Field1', map:'value'}]);   
            }
            function makemenu () {
                $("#jqxMenu").jqxMenu({ width: '600', height: '25', theme: theme });
                $('#jqxMenu').bind('itemclick', function (event) {
                    var element = event.args;    
                    switch (element.id ) {
                        case "w1":
                            $( "#rckmWindow" ).jqxWindow('show');
                            break;
                    }        
                });  
            }
            function makerckmdialog() {
                $('#rckmWindow').jqxWindow({ maxHeight:650, maxWidth: 850, minHeight: 300, minWidth: 750, height: 550, width: 850,
                    theme: theme, autoOpen:false, resizable: true, isModal: true,  modalOpacity: 0.01,
                    cancelButton: $('#rckcancel')
                });
                $("#rckdatum").jqxDateTimeInput({ width: '100px', height: '25px',  formatString: 'dd.MM.yyyy', theme: theme });                
                $("#rckstdnumimp").jqxNumberInput({ width: 100, height: 25,  promptChar:' ', spinMode:'simple',spinButtons:true, groupSeparator:'', theme: theme });                
                $("#rckiststdnumimp").jqxNumberInput({ width: 100, height: 25,  spinButtons:true, groupSeparator:'', promptChar:'',disabled:true,theme: theme });                
                $("#rcksollstdnumimp").jqxNumberInput({ width: 100, height: 25,  spinButtons:true, groupSeparator:'', promptChar:'', disabled:true,theme: theme });                
                $("#rckBericht").jqxCheckBox({ width: 120, height: 25, theme: theme });
                $("#rckartcombo").jqxDropDownList({ selectedIndex: 1, source: dataAdapter1, displayMember: "Field1", valueMember: "Field2", width: 200, height: 25, theme: theme });
                $("#rcktypcombo").jqxDropDownList({ selectedIndex: 0, source: dataAdapter1, displayMember: "Field1", valueMember: "Field2", promptText:"",width: 200, height: 25, theme: theme });
                $("#rckdropDownButton").jqxDropDownButton({ width: 150, height: 25, theme: theme });
                $("#rckbaugrcombo").jqxDropDownList({ selectedIndex: -1, source: dataAdapter1, displayMember: "Field1", valueMember: "Field2", promptText:"",width: 200, height: 25, theme: theme });
                $("#rcktaetdropdown").jqxDropDownButton({ width: 150, height: 25, theme: theme }); 
                $('#rckKapTree').jqxTree({ source: recordskap, height: '300px', width: '300px', theme: theme });
                $('#rckcancel').jqxButton({ theme: theme, height: '25px', width: '65px' });
                $('#rckok').jqxButton({theme: theme, height: '25px', width: '65px' });
            }
                function makegrids() {
                $("#jqxgridav").jqxGrid(
                {
                    width: "100%",
                    height: 550,
                    source: dataAdapterav,
                    theme:  theme,
                    filterable:true,
                    sortable: true,
                    pageable: false,
                    autoheight: false,
                    columnsresize: true,  
                    columnsreorder: true,
                    autoshowfiltericon: true,
                    rowsheight: 15,
                    columns: [
                        { text: 'Field1', datafield: 'Field1', width: 100},
                        { text: 'Field2', datafield: 'Field2', width: 70 },
                        { text: 'Field3', datafield: 'Field3', width: 70},
                        { text: 'Field4', datafield: 'Field4', width: 100},
                        { text: 'Field5', datafield: 'Field5', width: 100, cellsformat: 'F2',cellsalign: 'right' },
                        { text: 'Field6', datafield: 'Field6', width: 100, cellsformat: 'F2',cellsalign: 'right' },
                        { text: 'Field7', datafield: 'Field7', width: 100},
                        { text: 'Field8', datafield: 'Field8', width: 200},
                        { text: 'Field9', datafield: 'Field9', width: 70},
                        { text: 'Field10', datafield: 'Field10', width: 100},
                        { text: 'Field11', datafield: 'Field11', width: 150},
                        { text: 'Field12', datafield: 'Field12', width: 100, cellsformat: 'dd.MM.yyyy' },
                        { text: 'Field13', datafield: 'Field13', width: 100, cellsformat: 'dd.MM.yyyy' }
                    ]
                });
                $("#jqxgridrckm").jqxGrid(
                {
                    width: "100%",
                    height: 200,
                    source: dataAdapterRckm,
                    theme:  theme,
                    filterable:true,
                    sortable: true,
                    pageable: false,
                    autoheight: false,
                    columnsresize: true,  
                    columnsreorder: true,
                    autoshowfiltericon: true,
                    rowsheight: 15,
                    columns: [
                        { text: 'Field1', datafield: 'Field1', width: 70, cellsformat: 'dd.MM.yyyy'},
                        { text: 'Field2', datafield: 'Field2', width: 90 },
                        { text: 'Field3', datafield: 'Field3', width: 90},
                        { text: 'Field4', datafield: 'Field4', width: 80 },
                        { text: 'Field5', datafield: 'Field5', width: 80, cellsformat: 'F2',cellsalign: 'right'},
                        { text: 'Field6', datafield: 'Field6', width: 90},
                        { text: 'Field7', datafield: 'Field7', width: 150 },
                        { text: 'Field8', datafield: 'Field8', width: 80 },
                        { text: 'Field9', datafield: 'Field9', width: 80 },
                        { text: 'Field10', datafield: 'Field10', width: 110, cellsformat: 'dd.MM.yyyy hh:mm:ss'},
                        { text: 'Field11', datafield: 'Field11', width: 90 },
                        { text: 'Field12', datafield: 'Field12', width: 70 },                        
                        { text: 'Field13', datafield: 'Field13',columntype: 'checkbox', width:50}
                    ]
                });
            }
            
            $(document).ready(function () {
                var performLayout = function () {
                    var heightav = $('#avPanel').height() - $('#tbav').height()- $("#jqxMenu").jqxMenu('height')-5;
                    $("#jqxgridav").jqxGrid({ height:  heightav });
                    $("#jqxgridrckm").jqxGrid({ height:  $('#rckmPanel').height() - $('#tbrckm').height() });
                    $('#avPanel')[0].scrollTop = 0;
                };     
                $("input").addClass('jqx-input');
                $("input").addClass('jqx-input-'+theme);
                $("input").addClass('jqx-rc-all-'+ theme);
                $("input").addClass('jqx-rc-all-'+ theme);
                $("input").css("height" ,"21px");
                $("input:enabled").css("background-color","white");
                defineDS();
                makemenu(); 
                makerckmdialog();
                makegrids();
                $('#mainSplitter').jqxSplitter({ width: "100%", height: "100%", orientation: 'horizontal', theme: theme, panels: [{ size: "75%", collapsible: false}, { size: "25%"}] });
                $('#mainSplitter').bind('resize', function (event) {
                    performLayout();
                });    
                performLayout();
                $("#jqxWidget").css('visibility', 'visible');
            });
            
        </script>
    </head>
    <body>
        <style type="text/css">
            .text-input
            {
                height: 21px;
                background-color: white;
            }
            .jqx-grid-cell 
            {
                font-size: 10px
            }        
        </style>        
        <div id='jqxWidget' class="default" style='visibility: hidden'>   
            <div id="mainSplitter">
                <div class="splitter-panel" id="avPanel"> 
                    <div id='jqxMenu' style='margin-left: 10px;'>
                        <ul>
                            <li>Document
                                <ul style='width: 250px;'>
                                    <li id="w1"><a href="#">Show Window</a></li>
                                    <li id="w2"><a href="#">Menu2</a></li>
                                </ul>                            
                            </li>
                        </ul>
                    </div>
                    <table id="tbav" width="100%" style='background-color:skyblue;'>
                        <tr> <th id="tbcaption"> Grid1 </th> </tr>
                    </table>                
                    <div id="jqxgridav"> </div>
                </div>
                <div class="splitter-panel" id="rckmPanel">
                    <table id="tbrckm" width="100%" style='background-color:skyblue;'>
                        <tr> <th> Grid2 </th> </tr>
                    </table>  
                    <div id="jqxgridrckm"> </div> 
                </div>
            </div> 
            <div id="rckmWindow">
                <div>MyWindow </div>
                <fieldset>
                    <table>
                        <colgroup width="8.33%" span=12> </colgroup> 
                        <tr>
                            <td colspan=2 align ="right">Text1:</td>
                            <td colspan=2><input type="text" size="10" disabled="disabled" id ="rckauftrnr"></td>
                            <td colspan=2 align ="right">Text2:</td>
                            <td colspan=2><input type="text" size="4" disabled="disabled" id ="rckknoten" ></td>
                            <td colspan=2 align ="right">Text3:</td>
                            <td colspan=2><input type="text" size="4" disabled="disabled" id ="rckavo" ></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text4:</td>
                            <td colspan=2><input type="text" size="8" disabled="disabled" id ="rckwo_nr"></td>
                            <td colspan=2 align ="right">Text5:</td>
                            <td colspan=2><input type="text" size="20" disabled="disabled" id ="rckstatus"></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text6:</td>
                            <td colspan=4><input type="text" size="40" disabled="disabled" id ="rckprojekt"></td>
                            <td colspan=2 align ="right">Text7:</td>
                            <td colspan=4><input type="text" size="40" disabled="disabled" id ="rckvorgang"></td>
                        </tr>    
                    </table>
                </fieldset>
                <fieldset>
                    <legend>Legend1</legend>
                    <table>
                        <colgroup width="8.33%" span=12> </colgroup>     
                        <tr>
                            <td colspan=2 align ="right">Text8:</td>
                            <td colspan=4><div id='rckartcombo'> </div></td>
                            <td colspan=2 align ="right">Text9:</td>
                            <td colspan=4><div id='rcktypcombo'> </div></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text10:</td>
                            <td colspan=2><div id="rckdropDownButton"><div id='rckKapTree'> </div> </div></td>
                            <td colspan=6><input type="text" size="40" disabled="disabled" id ="rckKapBez"></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text11:</td>
                            <td colspan=2><div id='rckstdnumimp'> </div></td>
                            <td colspan=2 align ="right">Text12:</td>
                            <td colspan=2><div id='rckiststdnumimp'> </div></td>
                            <td colspan=2 align ="right">Text13:</td>
                            <td colspan=2><div id='rcksollstdnumimp'> </div></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text14:</td>
                            <td colspan=2><div id='rckdatum'> </div></td>
                            <td colspan=2 align ="right">Text15:</td>
                            <td colspan=3><div id='rcktaetdropdown'></div></td>
                            <td colspan=3><input type="text" size="40" disabled="disabled" id ="rcktaet"></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text16:</td>
                            <td colspan=2><div id='rckBericht'> </div></td>
                        </tr>
                    </table>
                </fieldset>    
                <fieldset>
                    <table>
                        <colgroup width="8.33%" span=12> </colgroup>     
                        <tr>
                            <td colspan=2 align ="right">Text17:</td>
                            <td colspan=2> <div id='rckbaugrcombo'> </div> </td>
                            <td colspan=4> <input type="text" size="40" disabled="disabled" id ="rckbaugrtext" </td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text18:</td>
                            <td colspan=2><input type="text" size="40" maxlength="40" id="rckauftraggeber"></td>
                        </tr>
                        <tr>
                            <td colspan=2 align ="right">Text19:</td> 
                            <td colspan=10><input type="text" size="100" height="30" maxlength="100" id="rcktext"></td>
                    </table>
                </fieldset>    
                <div style="float: right; margin-top: 15px;">
                    <input type="button" id="rckok" value="OK" style="margin-left:300px; margin-right: 10px" />
                    <input type="button" id="rckcancel" value="Cancel" />
                </div>
            </div> 
        </div>            
    </body>
</html>
January 7, 2013 at 2:50 pm Strange effect with scrollbar #13236
Dimitar
Participant
Hi Michael76,
Thank you for your feedback. We have created a work item on the reported issue.
Best Regards,
Dimitar
jQWidgets team
http://www.jqwidgets.com/
Author

Posts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.