Issue with linked columns not consistently clickable in IE11 - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 2 voices, and was last updated by Martin 6 years, 10 months ago.

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

Author

Issue with linked columns not consistently clickable in IE11 Posts

June 21, 2018 at 7:09 pm Issue with linked columns not consistently clickable in IE11 #100656

Participant

One of our agencies that uses the Data Grid is having bizarre IE issues with linked column data — and my suspicion is that absolute positioning and z-indexes may be to blame. There are some links that aren’t reliably clickable and this video screencap that I threw together shows it in action: https://www.youtube.com/watch?v=DVZbgZWSwu0 — when a link is in full view on a page (you don’t have to scroll down to it), the link clicks out to the destination just fine. But when you reduce the browser’s height to less than the position of said link, the link doesn’t work. Instead the browser just scrolls to the top of the grid.

It’s only IE — Firefox and Chrome behave normally.
The rendered source in the inspector tools show a properly formatted <a> tag
The issue only happens when a link’s vertical position is lower than the height of the window from the point where the grid is instantiated.

I’m at my wit’s end here and am pretty sure this has to do with the inline CSS generated by the data grid script. The click behavior of the links is the same if you were to click anywhere (outside the link) within the data grid.

June 22, 2018 at 11:00 am Issue with linked columns not consistently clickable in IE11 #100674

Martin

Participant

Hello michaeltangen,

I’ve tried reproducing this issue but without success. The links open correctly in IE11 even when you scroll down to them or when you reduce the height.
Can you send you code so we can take a look at it?
Here is the example that I’ve tried (I added more item entries in the feed.xml file, so there are enough records in the grid to scroll down):

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta name="viewport" content="width =device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var url = "sampledata/feed.xml";
            var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'title', type: 'string' },
                        { name: 'link', type: 'string' },
                        { name: 'pubDate', type: 'date' },
                        { name: 'creator', map: 'dc\\:creator', type: 'string' },
                    ],
                    root: "channel",
                    record: "item",
                    url: url
                };
            var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                var format = { target: '"_blank"' };
                var html = $.jqx.dataFormat.formatlink(value, format);
                return html;
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid.
            $("#grid").jqxGrid(
                {
                    width: 1200,
                    source: dataAdapter,
                    pageable: false,
                    autoheight: true,
                    columns: [
                        { text: 'Link', datafield: 'link', width: 550, cellsrenderer: linkrenderer },
                        { text: 'Title', datafield: 'title', width: 200 },
                        { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                        { text: 'Creator', datafield: 'creator', width: 200 }
                    ]
                });
        });
    </script>
</head>
<body class='default'>
    <div id="grid">
    </div>
</body>
</html>

Best Regards,
Martin

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

Author

Posts

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

You must be logged in to reply to this topic.