1. 首頁
  2. 問答
  3. FixedSplitter Worklight 5.0.5問題

FixedSplitter Worklight 5.0.5問題

2013-03-22 20 views
0

我正在開發一個使用FixedSplitter測試screenSizeAware屬性進行佈局的移動應用程序。無論是否有這個屬性集，我都會遇到以下問題：當我在瀏覽器模擬或模擬器（iOS或Android）中測試應用程序時，在標題標記之後，在FixedSplitter中包含的ScrollableView的內容之前有一個空白區域。 我注意到如果我沒有在標題標籤中設置屬性fixed ='true'，這個空白區域不會出現，但是應用程序沒有我想要獲得的行爲... 我發佈了HTML代碼和CSS的應用程序，這部分：FixedSplitter Worklight 5.0.5問題

<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;*/ 
}

任何幫助表示讚賞，

恩里科

來源

2013-03-22 enrico.visentini

回答

相關問題

 相關問題