Question

您是否有任何线索正确对齐Ionic date picker。我尝试过使用float-right和float-end。但没有运气:(

注意：我需要right align label <ion-list> <ion-item> <ion-label fixed>Compl. Date</ion-label> <ion-datetime displayFormat="D MMM, YYYY" [(ngModel)]="completionDate" float-end></ion-datetime> </ion-item> </ion-list>的最后日期。

您可以使用stackblitz

public static async Task UpdateAsync(this Foo foo)
{
    using (var db = new DBContext())
    {
        db.Foo.Update();
        await db.SaveChangesAsync();
    }
}

public static async Task UpdateAsync(this Bar bar)
{
    using (var db = new DBContext())
    {
        db.Bar.Update(bar);
        await db.SaveChangesAsync();
    }
}

Answer 1

在右边对齐日期时间（没有其他自定义代码）的同时保持标签可点击性的唯一可能方法是让日期时间占据100％宽度，然后右对齐文本，如下所示。 / p>

<ion-list>
    <ion-item>
        <ion-label fixed>Compl. Date</ion-label>
        <ion-datetime  style="width: 100%; text-align: right;"displayFormat="D MMM, YYYY" [(ngModel)]="completionDate"></ion-datetime>
    </ion-item>
</ion-list>

您也可以使用position: absolute; right: 0;代替全宽+文字对齐，但是您必须为标签创建自定义点击功能以激活日期选择器模式。

Answer 2

我想我已经得到了它

    <ion-list>
    <ion-item>
        <ion-label style=" text-align: right;">Compl. Date</ion-label>
        <ion-datetime displayFormat="D MMM, YYYY" [(ngModel)]="completionDate" float-end></ion-datetime>
    </ion-item>
</ion-list>

右对齐标签上的离子日期时间选择器日期

2 个答案: