bug? dojox.mobile.FixedSplitter and dojox.mobile.ScrollableView

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

bug? dojox.mobile.FixedSplitter and dojox.mobile.ScrollableView

klng@intersoln.com
Hi,

Not sure if there's a bug or something wrong with my html file below. I'm not able to "scroll" to Listitem "category 11 to category 15" using dojox.mobile.FixedSplitter with vertical orientation.

I can drag and see Listitem "category 11 to category 15" but when I release the mouse click, the dojox.mobile.ScrollableView scrolls back to the beginning instead of staying stationary for me to select the desired Listitem.

Can anyone shed some light? Thanks in advance.

Regards

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" type="text/css" href="/interSoln/resources/dojox/mobile/themes/FixedSplitter.css" />
    <link rel="stylesheet" type="text/css" href="/interSoln/resources/dojox/mobile/themes/iphone/iphone.css" />
    <script type="text/javascript" src="/interSoln/resources/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: false"></script>    <script type="text/javascript" src="/interSoln/resources/dojo/interSolndojo.js"></script>    <script type="text/javascript"> dojo.require("dojox.mobile"); dojo.require("dojox.mobile.ScrollableView"); dojo.require("dojox.mobile.FixedSplitter"); dojo.require("dojox.mobile.FlippableView"); dojo.require("dojox.mobile.IconContainer"); dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat"); dojo.requireIf(!dojo.isWebKit, "dojo.fx"); dojo.requireIf(!dojo.isWebKit, "dojo.fx.easing"); </script>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
  </head>
  <body>
    <div dojoType="dojox.mobile.FixedSplitter" style="width:100%;height:100%;" orientation="V">
      <div id="top1" dojoType="dojox.mobile.FixedSplitterPane">
       

      </div>
      <div id="bottom1" dojoType="dojox.mobile.FixedSplitterPane">
        <div dojoType="dojox.mobile.FixedSplitter" style="width:100%;height:100%;" orientation="H">
          <div id="left1" style="width:15%;height:100%" dojoType="dojox.mobile.FixedSplitterPane">
            <div dojoType="dojox.mobile.FixedSplitter" orientation="V">
              <div id="top2" dojoType="dojox.mobile.FixedSplitterPane" style="height:30%;overflow: hidden">
                <div dojoType="dojox.mobile.FlippableView" selected="true">
                  <div dojoType="dojox.mobile.RoundRect">
                    testA
                  </div>
                </div>
                <div dojoType="dojox.mobile.FlippableView">
                  <div dojoType="dojox.mobile.RoundRect">
                    testB
                  </div>
                </div>
                <div dojoType="dojox.mobile.FlippableView">
                  <div dojoType="dojox.mobile.RoundRect">
                    testC
                  </div>
                </div>
                <div dojoType="dojox.mobile.FlippableView">
                  <ul dojoType="dojox.mobile.RoundRectList">
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem" style="font-size:10px">
                      1. Dojo: Traditional Karate<br>
                    $14.50 (50%) In Stock # (531)
                    </li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem" style="font-size:10px">
                      2. Japanese Martial Arts Dojo<br>
                      Martin Parker Hardcover<br>
                    $14.00 (60%) In Stock<br>
                    # (173)
                    </li>
                  </ul>
                </div>
              </div>
              <div dojoType="dojox.mobile.FixedSplitterPane" style="height:60%;overflow: hidden;">
                <div dojoType="dojox.mobile.ScrollableView" selected="true">
                  <ul dojoType="dojox.mobile.RoundRectList">
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 1</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 2</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 3</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 4</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 5</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 6</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 7</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 8</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 9</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 10</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 11</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 12</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 13</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 14</li>
                    <li class="mblVariableHeight" dojoType="dojox.mobile.ListItem">Category 15</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div dojoType="dojox.mobile.FixedSplitterPane" style="overflow: hidden;">
            <div id="mainpage" dojoType="dojox.mobile.ScrollableView"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>