Ibm mobilefirst Worklight 5.0.5与FixedSplitter的问题
我正在开发一个带有FixedSplitter的移动应用程序，测试ScreenSizeWare属性的布局。无论是否设置此属性，我都会遇到以下问题：当我在浏览器模拟或emulator（iOS或Android）中测试应用程序时，在标题标记之后，FixedSplitter中包含的ScrollableView的内容之前有一个空格。 我注意到，如果我没有在heading标记中设置fixed='true'属性，则不会出现此空白，但应用程序没有我希望获得的行为。。。 我发布了应用程序这一部分的html代码和css：Ibm mobilefirst Worklight 5.0.5与FixedSplitter的问题,ibm-mobilefirst,Ibm Mobilefirst,我正在开发一个带有FixedSplitter的移动应用程序，测试ScreenSizeWare属性的布局。无论是否设置此属性，我都会遇到以下问题：当我在浏览器模拟或emulator（iOS或Android）中测试应用程序时，在标题标记之后，FixedSplitter中包含的ScrollableView的内容之前有一个空格。 我注意到，如果我没有在heading标记中设置fixed='true'属性，则不会出现此空白，但应用程序没有我希望获得的行为。。。 我发布了应用程序这一部分的html代码和cs
<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>
Enrico这可能与以下问题相同： 你能试试那里给出的解决方案吗
/* 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;*/
}