jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by PatrickA 11 years, 4 months ago.

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

Author

Text above Grid inside a Splitter disappears in Chrome and IE 11 Posts

February 25, 2014 at 4:22 pm Text above Grid inside a Splitter disappears in Chrome and IE 11 #50117

Participant

I don’t know if this is a feature or a bug but the problem I encounter is counter-intuitive to me and does not happen with Firefox 27.

I took one of the demos (“In this sample is demonstrated how to integrate jqxGrid with jqxSplitter“) and added a small line above the grid. And, lo and behold, when I click in the grid the small line above it disappears in the latest Chrome and IE11. If I don’t use a splitter this does not happen (the line remains visible when I click in the grid).

So here is the code:



<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to integrate jqxGrid with jqxSplitter</title>
    <link rel="stylesheet" href="./jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./jqwidgets/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="./jqwidgets/scripts/demos.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' },
                    { name: 'ContactTitle', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Country', type: 'string' }
                ],
                localdata: data,
                updaterow: function (rowid, rowdata, commit) {
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '100%',
                source: dataAdapter,
                
                columnsresize: true,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country'}
                ]
            });

            $("#CompanyName").jqxInput({height: 23});
            $("#ContactName").jqxInput({ height: 23});
            $("#ContactTitle").jqxInput({ height: 23});
            $("#City").jqxInput({ height: 23});
            $("#Country").jqxInput({ height: 23});
            $("#splitter").jqxSplitter({  width: 680, height: 400, panels: [{ min: 150, size: 330 }, {min: 250}] });
            $('#jqxgrid').on('rowselect', function (event) {
                // event arguments.
                var args = event.args;
                // selected row.
                var row = event.args.row;
                // update inputs.
                $("#CompanyName").val(row.CompanyName);
                $("#ContactName").val(row.ContactName);
                $("#ContactTitle").val(row.ContactTitle);
                $("#City").val(row.City);
                $("#Country").val(row.Country);
            });
            $("#Save").jqxButton({  width: 70, height: 23 });
            $("#Save").click(function () {
                var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
                var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
                var data = { CompanyName: $("#CompanyName").val(), ContactName: $("#ContactName").val(), ContactTitle: $("#ContactTitle").val(), City: $("#City").val(), Country: $("#Country").val() };
                $("#jqxgrid").jqxGrid('updaterow', rowid, data);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="splitter">
        <div>
            <div>A Title</div>
            <div style="border: none;" id='jqxgrid'>
             
            </div>
        </div>
        <div id="ContentPanel">
            <form id="Form">
                <table style="margin-top: 20px; width: 100%;">
                     <tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="CompanyName" /></td></tr>
                     <tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="ContactName" /></td></tr>
                     <tr><td style="text-align:right;">Contact Title:</td><td style="text-align:left;"><input type="text" id="ContactTitle" /></td></tr>
                     <tr><td style="text-align:right;">City:</td><td style="text-align:left;"><input type="text" id="City" /></td></tr>
                     <tr><td style="text-align:right;">Country:</td><td style="text-align:left;"><input type="text" id="Country" /></td></tr>
                     <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Click in the grid and the “A Title” line disappears !

February 25, 2014 at 4:33 pm Text above Grid inside a Splitter disappears in Chrome and IE 11 #50119

Peter Stoev

Keymaster

Hi PatrickA,

The problem is that the new DIV tag’s height + the Grid’s Height makes more than 100% height. That is not a feature and is also not a bug. That is how Web browsers work. When you have a DIV tag with let’s say 20px height and another DIV tag below it with 100% height, the height becomes 100% + 20px which is more than the visible area. When you Click on the Grid, the Grid gets the Focus and it automatically brings the Grid into the View.

Here’s how you can update your sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to integrate jqxGrid with jqxSplitter</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' },
                    { name: 'ContactTitle', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Country', type: 'string' }
                ],
                localdata: data,
                updaterow: function (rowid, rowdata, commit) {
                    commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '90%',
                source: dataAdapter,
                
                columnsresize: true,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country'}
                ]
            });

            $("#CompanyName").jqxInput({height: 23});
            $("#ContactName").jqxInput({ height: 23});
            $("#ContactTitle").jqxInput({ height: 23});
            $("#City").jqxInput({ height: 23});
            $("#Country").jqxInput({ height: 23});
            $("#splitter").jqxSplitter({  width: 680, height: 400, panels: [{ min: 150, size: 330 }, {min: 250}] });
            $('#jqxgrid').on('rowselect', function (event) {
                // event arguments.
                var args = event.args;
                // selected row.
                var row = event.args.row;
                // update inputs.
                $("#CompanyName").val(row.CompanyName);
                $("#ContactName").val(row.ContactName);
                $("#ContactTitle").val(row.ContactTitle);
                $("#City").val(row.City);
                $("#Country").val(row.Country);
            });
            $("#Save").jqxButton({  width: 70, height: 23 });
            $("#Save").click(function () {
                var row = $('#jqxgrid').jqxGrid('getselectedrowindex');
                var rowid = $("#jqxgrid").jqxGrid('getrowid', row);
                var data = { CompanyName: $("#CompanyName").val(), ContactName: $("#ContactName").val(), ContactTitle: $("#ContactTitle").val(), City: $("#City").val(), Country: $("#Country").val() };
                $("#jqxgrid").jqxGrid('updaterow', rowid, data);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="splitter">
        <div>
            <div style="background: blue; height:10%;"></div>
            <div style="border: none;" id='jqxgrid'>
             
            </div>
        </div>
        <div id="ContentPanel">
            <form id="Form">
                <table style="margin-top: 20px; width: 100%;">
                     <tr><td style="text-align:right;">Company Name:</td><td style="text-align:left;"><input type="text" id="CompanyName" /></td></tr>
                     <tr><td style="text-align:right;">Contact Name:</td><td style="text-align:left;"><input type="text" id="ContactName" /></td></tr>
                     <tr><td style="text-align:right;">Contact Title:</td><td style="text-align:left;"><input type="text" id="ContactTitle" /></td></tr>
                     <tr><td style="text-align:right;">City:</td><td style="text-align:left;"><input type="text" id="City" /></td></tr>
                     <tr><td style="text-align:right;">Country:</td><td style="text-align:left;"><input type="text" id="Country" /></td></tr>
                     <tr><td></td><td style="padding-left: 35px; text-align: left;"><input value="Save" type="button" id="Save" /></td></tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 25, 2014 at 5:02 pm Text above Grid inside a Splitter disappears in Chrome and IE 11 #50120

PatrickA

Participant

Okay, I see thank you. I suppose there is no better way than a straight percentage (90%) since I believe I cannot mention an expression there (like 100%-1em/100%-30px or whatever the size of that header).

Author

Posts

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

You must be logged in to reply to this topic.