2011-10-20 11 views
0

私はこのアプリを開発していて、画面の右側に余裕を持たせることができません。注:上、下、左の面は正常です。Sencha Touch 2で右余白を正しく設定するにはどうすればよいですか?

Here's a screenshot
(何らかの理由でSOフォーマット文句を言った)

私は、次のCSSスタイリング

#rpc-view-home-indexview{ 
    margin: 5px; 
} 

を持って、これは

Ext.define('rpc.view.home.indexView', { 
    extend: 'Ext.Panel', 
    id: 'rpc-view-home-indexview', // This is where I'm setting the element for the margin 
    alias: 'widget.home-indexView', 
    config: { 
     scroll: 'vertical', 
     items: [{ 
      xtype: 'container', 
      items: [{ 
       html: '<div class="rounded-div"><h1>RockPointe Church</h1><i>One church meeting in multiple locations.</i></div>' 
      }] 
     }, { 
      // ... 
     }] 
    } 
}); 
私のJSビューです

編集あなたがそこに持っている100%: と誰もが気にならば、ここで私が問題を賭ける関連するレンダリングされたHTML

<div class="x-body" id="ext-element-44"> 
    <div class="x-inner x-layout-card" id="ext-element-4"> 
     <div class="x-container x-panel x-layout-card-item" id="rpc-view-home-indexview" style=""> 
      <div class="x-body x-scroll-view" id="ext-element-24"> 
       <div class="x-scroll-bar-grid-wrapper" id="ext-element-23"> 
        <div class="x-scroll-bar-grid"> 
         <div> 
          <div></div> 
          <div> 
           <div class="x-scroll-bar x-scroll-bar-y" id="ext-element-22"> 
            <div class="x-scroll-indicator-csstransform x-scroll-indicator x-scroll-indicator-y" 
             style="opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); " 
             id="ext-component-2"> 
             <div id="ext-element-26"></div> 
             <div id="ext-element-28" 
              style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(570); top: 3px; "></div> 
             <div id="ext-element-27" 
              style="-webkit-transform: translate3d(0px, 573px, 0px); "></div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div> 
          <div> 
           <div id="ext-element-18" class="x-scroll-bar x-scroll-bar-x"> 
            <div id="ext-component-1" 
             class="x-scroll-indicator-csstransform x-scroll-indicator x-scroll-indicator-x" 
             style="opacity: 0; -webkit-transform: translate3d(0px, 0px, 0px); "> 
             <div id="ext-element-19"></div> 
             <div id="ext-element-20"></div> 
             <div id="ext-element-21"></div> 
            </div> 
           </div> 
          </div> 
          <div></div> 
         </div> 
        </div> 
       </div> 
       <div id="ext-element-25" class="x-scroll-container"> 
        <div class="x-inner x-panel-inner x-scroll-scroller" id="ext-element-6"> 
         <div class="x-container" id="ext-container-1"> 
          <div class="x-inner" id="ext-element-7"> 
           <div class="x-container" id="ext-container-2"> 
            <div class="x-inner" id="ext-element-8"> 
             <div class="x-innerhtml " id="ext-element-9"> 
              <div class="rounded-div"><h1>RockPointe Church</h1><i>One church meeting in 
               multiple locations.</i></div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="x-container" id="ext-container-3"> 
          <div class="x-inner x-layout-hbox" id="ext-element-10" 
           style="-webkit-box-align: stretch; -webkit-box-pack: center; "> 
           <div id="ext-button-1" class="x-button x-button-rpc x-button-plain x-layout-box-item" 
            style="margin-top: 5px; -webkit-box-flex: 1; "><span style="display: none; " 
                          id="ext-element-11" 
                          class="x-badge"></span><span 
             class="x-button-icon" style="display: none; " id="ext-element-13"></span><span 
             style="" id="ext-element-12" class="x-button-label">Videos</span></div> 
           <div class="x-container x-button-rpc-spacer" id="ext-container-4" 
            style="margin-top: 5px;"> 
            <div class="x-inner" id="ext-element-14"></div> 
           </div> 
           <div class="x-button x-button-rpc x-button-plain x-layout-box-item" id="ext-button-2" 
            style="margin-top: 5px; -webkit-box-flex: 1; "><span style="display: none; " 
                          class="x-badge"></span><span 
             class="x-button-icon" style="display: none; "></span><span style="" 
                            class="x-button-label" 
                            id="ext-element-15">Events</span> 
           </div> 
           <div class="x-container x-button-rpc-spacer" id="ext-container-5" 
            style="margin-top: 5px;"> 
            <div class="x-inner" id="ext-element-16"></div> 
           </div> 
           <div class="x-button x-button-rpc x-button-plain x-layout-box-item" id="ext-button-3" 
            style="margin-top: 5px; -webkit-box-flex: 1; "><span style="display: none; " 
                          class="x-badge"></span><span 
             class="x-button-icon" style="display: none; "></span><span style="" 
                            class="x-button-label" 
                            id="ext-element-17">Sites</span> 
           </div> 
          </div> 
         </div> 
         <div class="x-size-change-detector x-size-change-detector-expand"> 
          <div></div> 
         </div> 
         <div class="x-size-change-detector x-size-change-detector-shrink"> 
          <div></div> 
         </div> 
        </div> 
        <div class="x-size-change-detector x-size-change-detector-expand"> 
         <div></div> 
        </div> 
        <div class="x-size-change-detector x-size-change-detector-shrink"> 
         <div></div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="x-container x-layout-card-item" id="ext-container-6" style="display: none !important; "> 
      <div class="x-inner" id="ext-element-32"></div> 
     </div> 
     <div class="x-container x-layout-card-item" id="ext-container-7" style="display: none !important; "> 
      <div class="x-inner" id="ext-element-35"></div> 
     </div> 
     <div class="x-container x-layout-card-item" id="ext-container-8" style="display: none !important; "> 
      <div class="x-inner" id="ext-element-38"></div> 
     </div> 
     <div class="x-container x-layout-card-item" id="ext-container-9" style="display: none !important; "> 
      <div class="x-inner" id="ext-element-41"></div> 
     </div> 
    </div> 
</div> 

答えて

0

うわー、単純な解決策を見ているときに何らかの理由で私の脳が閉ざされるだけです。 :(

#rpc-view-home-indexview{ 
    padding: 5px; 
} 
0

だが、その幅です。つまり、コンテナdivのサイズの100%を使用することになります。コンテナdivは画面と同じ幅です。あなたが持っているパディングやボーダーがあれば、5ピクセルのマージンを加えて、スクリーンの外に出ます。

意味がありますか?

+0

私はあなたがそれを考える理由を見ることができますが、それはそうではありません。 –

関連する問題