ионное содержание: заполнение или отсутствие прокладки?

Question

Я пытаюсь воссоздать нечто похожее на this. Я заметил, что поля ввода не могут быть внутри <ion-content class="padding">, потому что тогда они получают уродливое дополнение. Кнопка, с другой стороны, нуждается в этом дополнении, потому что в противном случае она прилипает в сторону без каких-либо дополнений.

Следующий код не работает, так что места кнопку на верхней части поля ввода:

<ion-view view-title="Settings"> 
    <div ng-controller="ClickedCtrl"> 
     <ion-content> 
      <div class="list"> 
       <label class="item item-input item-floating-label"> 
        <span class="input-label">First Name</span> 
        <input type="text" placeholder="First Name" ng-mode="fname"> 
       </label> 
      </div> 
     </ion-content> 
     <ion-content class="padding"> 
      <button class="button button-positive" ng-click="clicked()"> 
       Save 
      </button> 
     </ion-content> 
    </div> 
</ion-view> 

UPDATE:

Это расположение, что я хочу (уведомление нет обивка на поля ввода, но есть обивка на кнопку):

Это расположение, что я получаю, когда я использую <ion-content class="padding"> (обратите внимание на отступы на поля ввода):

Это расположение, что я получаю, когда я использую <ion-content> (уведомление там нет обивки на кнопке):

Answer 1

Вы должны использовать его так:

<ion-content padding="true"> 

Вы можете увидеть пример от official Ionic example

Answer 2

Я создал рабочий пример здесь: http://play.ionic.io/app/1662da9d9b7d
Для достижения вашего de хряков эффект место всех ваших текстовых полей формы в элементе, без горизонтальной прокладки, так что формы достигают края экрана, а затем поместить кнопку в гнездовой DIV с прокладкой, например, так:

<ion-content> 
<div class="list"> 
    <label class="item item-input item-floating-label"> 
    <span class="input-label">Email Address</span> 
    <input type="email" placeholder="Email Address"> 
    </label> 
    <div class="padding-horizontal"> 
    <button class="button button-positive button-block" ng-click="clicked()"> 
     Create Account 
    </button> 
    </div> 
</div> 
</ion-content> 

См. Вывод ниже.

Я применяется только горизонтальное заполнение, потому что чувствовал, что вертикальная прокладка, которая добавляется по умолчанию в классе padding [0], в результате слишком большого количества белого пространства.

[0] http://ionicframework.com/docs/components/#padding

Answer 3

Согласно документации, вам необходимо использовать полную ширину блока Кнопка:

<button class="button button-full button-positive"> 
    Full Width Block Button 
</button> 

и вашу директиву содержание не должно иметь атрибут заполнения.

Надеюсь, это поможет.