Splitter divider jumps around on iPad - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 10 months ago.

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

Author

Splitter divider jumps around on iPad Posts

May 20, 2012 at 6:24 pm Splitter divider jumps around on iPad #4258

Member

We are evaluating jqwidget library as a way of developing HTML5 apps that also work in the iPad. We have nested the Splitter within a Tab. Adjusting the splitter in a desktop browser works fine. On the iPad the splitter jumps back and forth as one drags the splitter. I can provide the URL for testing this. The same splitter panels works fine without the parent tabs.

May 21, 2012 at 7:43 am Splitter divider jumps around on iPad #4267

Peter Stoev

Keymaster

Hi arudmik,

I am unable to reproduce the issue locally. I nested a Splitter within a Tab and tested the application with IPAD.

Here’s my test application:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#splitter').jqxSplitter({ height: 600, width: '100%', panels: [{ size: 200 }, { size: 400}] });
            $("#tabs").jqxTabs({ width: '80%' });
        });
    </script>
</head>
<body class='default'>
<div style="width: 100%; height: 1000px;">
    <div style="float:left; width: 10%; height:100%;">
    </div>
    <div style="float:left;" id="tabs">
        <ul>
            <li style="margin-left: 30px;">Tab 1</li>
            <li>Tab 2</li>
        </ul>
        <div id="splitter">
            <div class="splitter-panel">
                Content 1.1
            </div>
            <div class="splitter-panel">
                Content 1.2
            </div>
        </div>
        <div>
            Content 2
        </div>
    </div>
    </div>
</body>
</html>

The Splitter’s dragging works fine. I guess that there’s something(css settings, html element, another widget or some other issue) that can break the default behavior in your app. Could you send us a small sample with jQWidgets – JavaScript + HTML code that I can copy locally and debug the specific application scenario?

Best Regardsm
Peter Stoev

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.