Как правильно установить правое поле в Sencha Touch 2?

Я работаю над этим приложением, и мне не удается правильно настроить поле в правой части экрана. ПРИМЕЧАНИЕ. Верхняя, нижняя и левая стороны работают нормально.

Вот скриншот
(по какой-то причине SO жаловался на формат )

У меня есть следующий стиль CSS

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

И это мой JS View

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>

css margin sencha-touch sencha-touch-2
person Chase Florell    schedule 20.10.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Бьюсь об заклад, проблема в том, что ширина: 100% у вас есть. Это означает, что он будет использовать 100% размера div-контейнера, ширина которого равна ширине экрана. добавьте поле в 5 пикселей плюс любые отступы или границы, которые у вас есть, и вы окажетесь за пределами экрана.

Имеет смысл?

person AutomaticLuke    schedule 21.10.2011
comment
Я понимаю, почему вы так думаете, но это не так. - person Chase Florell; 21.10.2011

arrow_upward
0
arrow_downward

Вау, у меня почему-то мозг просто отключается, когда я смотрю на простые решения. :(

#rpc-view-home-indexview{
    padding: 5px;
}
person Chase Florell    schedule 22.10.2011