對齊選擇和輸入文本Ionic2

當我在ion-grid中使用ion-item時，它總是佔用頁面的50％，而不考慮配置的大小。

任何想法如何做到這一點？

<ion-row> 
    <ion-col width-30> 
     <ion-item> 
      <ion-select [(ngModel)]="type"> 
      <ion-option value="work">work</ion-option> 
      <ion-option value="home">home</ion-option> 
      <ion-option value="cel">cel</ion-option> 
      </ion-select> 
     </ion-item> 
    </ion-col> 
    <ion-col width-70> 
     <ion-item> 
      <ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input> 
     </ion-item> 
    </ion-col> 
    </ion-row>

https://plnkr.co/edit/BwdCrwECIXV6krWZBCzl?p=preview

來源

2016-07-30 rodnei couto

就像你可以在Ionic2 docs看到這些，你可以用它來設置列的寬度值：

Explicit Column Percentage Attributes 
width-10  10% 
width-20  20% 
width-25  25% 
width-33  33.3333% 
width-50  50% 
width-67  66.6666% 
width-75  75% 
width-80  80% 
width-90  90%

這就是爲什麼如果您嘗試使用width-30或width-70，沒有什麼會改變。相反，您可以使用width-33和width-67來對齊這兩個字段，如在this working plunker中所看到的。

還有，如果你在瀏覽器中檢查ion-col元素，你會看到被應用這個樣式規則：

ion-col[width-33], ion-col[width-34] { 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 0 33.3333%; 
    -ms-flex: 0 0 33.3333%; 
    flex: 0 0 33.3333%; 
    max-width: 33.3333%; 
}

而且

ion-col[width-66], ion-col[width-67] { 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 0 66.6666%; 
    -ms-flex: 0 0 66.6666%; 
    flex: 0 0 66.6666%; 
    max-width: 66.6666%; 
}

未用width-30和width-70發生。

來源

2016-07-31 06:57:42 sebaferreras

感謝。完美答案 –

很高興我能幫忙:) – sebaferreras

先給離子項目作爲父標籤離子行

<ion-item> 
<ion-row> 
    <ion-col width-30> 

      <ion-select [(ngModel)]="type"> 
      <ion-option value="work">work</ion-option> 
      <ion-option value="home">home</ion-option> 
      <ion-option value="cel">cel</ion-option> 
      </ion-select> 
     </ion-item> 
    </ion-col> 
    <ion-col width-70> 
     <ion-item> 
      <ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input> 

    </ion-col> 
    </ion-row> 
</ion-item>

來源

2016-07-31 13:23:50

對齊選擇和輸入文本Ionic2

回答

相關問題