与FixedSplitter的Worklight 5.0.5问题

时间:2013-03-22 09:42:34

标签: ibm-mobilefirst

我正在使用FixedSplitter开发一个移动应用程序,测试screenSizeAware属性以进行布局。无论是否设置此属性,我都会遇到以下问题:当我在浏览器模拟或模拟器(iOS或Android)中测试应用程序时,在标题标记之后,在FixedSplitter中包含的ScrollableViews的内容之前有一个空格。 我注意到如果我没有在标题标记中设置属性fixed ='true',则不会出现此空白区域,但应用程序没有我想要获取的行为... 我发布了应用程序这部分的html代码和CSS:

<body id="content" style="display: none;">

<!-- SPLASH SCREEN -->

<div id="loader">
    <div class="loaderShadowDiv">       </div>
    <div id="webLogo" align="center">
        <img id="logo" src="images/logo.jpg">
    </div>
</div>

<div data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props="orientation:'H', screenSizeAware: true">

    <!-- MAIN SIDE VIEW -->
    <div data-dojo-type="dojox.mobile.ContentPane" style="min-width: 320px; border-right: 1px solid black;">
        <div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
            data-dojo-props="selected:true">
            <h1 data-dojo-type="dojox.mobile.Heading" fixed="top">Instance Monitor</h1>
            <div data-dojo-type="dojox.mobile.RoundRectList">
                <div data-dojo-type="dojox.mobile.ListItem"
                    data-dojo-props="label:'ORDINI',moveTo:'orderSearchView',transition:'slide'" class="deviceFont"></div>
                <div data-dojo-type="dojox.mobile.ListItem"
                    data-dojo-props="label:'LISTINI'" class="deviceFont"></div>
            </div>
        </div>
    </div>

    <!-- RIGHT-SIDE VIEW -->
    <div data-dojo-type="dojox.mobile.ContentPane" style="width: 100%;">
    <!-- <div data-dojo-type="dojox.mobile.Container" style="width: 100%;"> -->
        <div data-dojo-type="dojox.mobile.ScrollableView" id="dummy">
            <h1 data-dojo-type="dojox.mobile.Heading"></h1>
        </div>

        <div data-dojo-type="dojox.mobile.ScrollableView" id="orderSearchView" onAfterTransitionIn="setCurrentView('orderSearchView');" style="font-size: small">
            <h1 data-dojo-type="dojox.mobile.Heading"
                data-dojo-props="label:'Ricerca Ordini', selected: false, back:'Home',moveTo:'mainView'" fixed="top"></h1>
            <div data-dojo-type="dojox.mobile.Container">
                <p align="center" class="deviceFont">Inserire i parametri di ricerca:</p>
            </div>
            <div data-dojo-type="dojox.mobile.RoundRect">
                <div data-dojo-type="dojox.mobile.ListItem"
                    data-dojo-props="label:'Item'">
                    <label style="padding-left: 12px" class="deviceFont">Stato Ordine:</label>
                    <button data-dojo-type="dojox.mobile.Button" type="button" style="margin-left: 12px" id="statoBtn" onclick="openStatoSel();" class="deviceFont">Attivo</button>
                </div>
                <div data-dojo-type="dojox.mobile.ListItem"
                    data-dojo-props="label:'Item'">
                    <label style="padding-left: 12px" class="deviceFont">Data Apertura:</label>
                    <button data-dojo-type="dojox.mobile.Button" type="button" style="margin-left: 12px" id="aperturaBtn" onclick="openAperturaSel();" class="deviceFont">-- selezionare --</button>
                </div>
                <div data-dojo-type="dojox.mobile.ListItem"
                    data-dojo-props="label:'Item'">
                    <label style="padding-left: 12px" class="deviceFont">Data Chiusura:</label>
                    <button data-dojo-type="dojox.mobile.Button" type="button" style="margin-left: 12px" id="chiusuraBtn" onclick="openChiusuraSel();" class="deviceFont">-- selezionare --</button>
                </div>
            </div>
            <div data-dojo-type="dojox.mobile.Container" align="center">
                <button data-dojo-type="dojox.mobile.Button" id="searchBtn" onClick="searchOrd();" class="deviceFont">Ricerca Ordini</button>
            </div>
        </div>

        <div data-dojo-type="dojox.mobile.ScrollableView" id="ordListView"
            data-dojo-props="selected:false,scrollDir:'v'" onAfterTransitionIn="setCurrentView('ordListView');">
            <h1 data-dojo-type="dojox.mobile.Heading"
                data-dojo-props="label:'Lista Ordini',back:'Ricerca', moveTo:'orderSearchView'" fixed="top"></h1>
            <div data-dojo-type="dojox.mobile.EdgeToEdgeDataList" id="SearchOrdListETE">
            </div>
        </div>

        <div data-dojo-type="dojox.mobile.ScrollableView" id="orderDetails"
            data-dojo-props="selected:false,scrollDir:'v'" onAfterTransitionIn="setCurrentView('orderDetails');">
            <h1 data-dojo-type="dojox.mobile.Heading"
                data-dojo-props="label:'Dettaglio Ordine',back:'Lista', moveTo:'ordListView'" fixed="top"></h1>
            <div data-dojo-type="dojox.mobile.RoundRect" style="font-size: medium">
                <div data-dojo-type="dojox.mobile.ListItem"
                    style="font-size: small" id="main" data-dojo-props="rightText:''">
                    <label style="margin-left: 12px; color: #0080ff">Ordine N.</label>
                    <label id="numord" style="padding-left: 12px"></label>
                </div>
                <div data-dojo-type="dojox.mobile.ListItem"
                    style="font-size: small" data-dojo-props="variableHeight:true">
                    <table style="margin-left: 8px">
                        <tr><td>
                            <label style="color: #0080ff">Fornitore:</label>
                        </td><td>
                            <label id="fornitore" style="padding-left: 5px"></label>
                        </td></tr>
                    </table>
                </div>
                <div data-dojo-type="dojox.mobile.ListItem"
                    style="font-size: small">
                    <label style="margin-left: 12px; color: #0080ff">Aperto il:</label>
                    <label id="dataAp" style="padding-left: 12px"></label>
                </div>
                <div data-dojo-type="dojox.mobile.ListItem"
                    style="font-size: small">
                    <label style="margin-left: 12px; color: #0080ff">Aperto da:</label>
                    <label id="utenteAp" style="padding-left: 12px"></label>
                </div>
            </div>

            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Tracking</h2>
            <div data-dojo-type="dojox.mobile.RoundRectDataList" id="tracking" style="font-size: small">
            </div>
            <div data-dojo-type="dojox.mobile.Container"></div>
            <div data-dojo-type="dojox.mobile.RoundRect" style="font-size: small">

                <label style="margin-left: 12px; color: #0080ff; font-weight: bold">Istanza BPM:</label>
                <label id="idIst" style="padding-left: 12px"></label>
            </div>
        </div>

    </div> <!-- fine container destra -->

</div>


<!--application UI goes here-->
<script src="js/initOptions.js"></script>
<script src="js/InstanceMonitor.js"></script>
<script src="js/messages.js"></script>

的CSS:

/* Reset CSS */
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
}

/* Worklight container div */

#content {
height: 460px;
margin: 0 auto;
width: 320px;
}

.lorem {
margin: 0px 0px;
padding: 10px;
color: #000000;
}

#loader {
width:100%; height:100%; margin:0; padding:0;
/*background: -webkit-gradient(linear, left top, left bottom, from(#096093), to(#ffffff)) !important;*/
background: #ffffff !important;
position:absolute;
z-index:999;
}

.loaderShadowDiv {
/*
-webkit-box-shadow: 0px 5px 6px 7px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0px 5px 6px 7px rgba(50, 50, 50, 0.4);
box-shadow: 0px 5px 6px 7px rgba(50, 50, 50, 0.4);
border-radius: 15px 15px/15px 15px;
*/
width: 90%;
margin: 33% auto;
background-color: white;
font-family: Helvetica;

}

#webLogo {
position: relative;
top: -45px;
width: 90%;
margin: 0px auto;
}

#webLogo IMG {
/*width: 100%;
height: 30px;*/
}

html, body {
height: 100%;
min-height: 100%;
overflow: hidden;
/*position: relative;*/
}

感谢任何帮助,

恩里科

1 个答案:

答案 0 :(得分:0)

可能与以下问题相同:

WL 5.0.5 EdgeToEdgeList first element not under the header but in the middle of the page

你能试试那里的解决方案吗?