【问题标题】：ion-label with custom full width form control带有自定义全宽表单控件的离子标签
【发布时间】：2018-03-08 19:49:55
【问题描述】：

如何将ion-label 与 100% 宽度的自定义表单控件一起使用？目前，只要我在我的表单中添加ion-label 到我的ion-item，我正在使用自定义表单控件（不是ion-input）我的自定义表单控件字段不再可见。

那么，我可以进行哪些更改以使 ion-label 与自定义表单控件一起使用？

示例代码：

<ion-item>
  <ion-label floating>Keywords</ion-label>
  <custom-input formControlName="content"></custom-input>
</ion-item>

我也试过这个：

<!-- Item with a label and content -->
  <ion-item>
    <ion-label>
      Item Label
    </ion-label>
    <div item-content>
      Item Content will be next to the label (not full width)
      <custom-input formControlName="content" item-end></custom-input>
    </div>
  </ion-item>

然而，这最终只占用了我页面宽度的一小部分。

item-end:

item-content:

我希望custom-input 的宽度为 100%（例如文本编辑器）

解决方案

受@Sampath 的双重项目理念的启发：

<ion-item no-lines>
  <ion-label>Content</ion-label>
</ion-item>
<ion-item>
  <custom-input formControlName="content"></custom-input>
</ion-item>

【问题讨论】：

你能显示你当前的code吗？
@Sampath 我添加了一些示例代码。

标签： angular typescript ionic2 ionic3

【解决方案1】：

您需要添加item-end attribute，如下所示。

那是因为 ion-item 组件有预定义的选择器集可用于在该组件内嵌入

official Git Repo

<ion-item>
  <ion-label floating>Keywords</ion-label>
  <custom-input formControlName="content" item-end></custom-input>
</ion-item>

如果你需要使用full width 那么：

<ion-item>
  <ion-label floating>Keywords</ion-label>
 </ion-item>
<ion-item>
  <custom-input formControlName="content" item-start></custom-input>
</ion-item>

【讨论】：

你是对的——这确实出现了——但它不是全宽的（这是我正在寻找的）。我还会添加屏幕截图以使其清晰。
希望现在一切都好不？
是的，谢谢@Sampath。 :) 我发布了由您的建议触发的更新解决方案。

【解决方案2】：

我尝试了以下并且聪明地工作，请尝试并更新任何其他好的方法。

<ion-row>
   <ion-col size="5">
        <ion-label floating>Content: </ion-label>
    </ion-col>
    <ion-col size="7">
        <ion-select formControlName= ...
        </ion-select>
    </ion-col>
</ion-row>

【讨论】：