[英]How can I properly set the right hand margin in Sencha Touch 2?
我正在使用此應用程序,似乎無法在屏幕右側正確設置邊距。 注意:頂部,底部和左側都可以正常工作。
這是截圖
(由於某種原因,SO抱怨該格式)
我有以下CSS樣式
#rpc-view-home-indexview{
margin: 5px;
}
這是我的JS視圖
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>'
}]
}, {
// ...
}]
}
});
編輯
如果有人在乎,這是相關的呈現的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>
我敢打賭,問題是寬度:您那里有100%。 這意味着它將使用容器div大小的100%,它與屏幕一樣寬。 添加5 px的頁邊距以及任何填充或邊框,您最終會超出屏幕范圍。
說得通?
哇,由於某種原因,當我看着簡單的解決方案時,我的大腦只是關閉了。 :(
#rpc-view-home-indexview{
padding: 5px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.