ion-label with custom full width form control

user_1313263 0
Viewed 5421

How can I use ion-label with a 100% width custom form control? Currently as soon as I add an ion-label to my ion-item inside my form, where I am using a custom form control (not ion-input) my custom form control field is not visible anymore.

So, what can I change to make the ion-label work with a custom form control?

Example code:

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

I also tried this:

<!-- 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>

However this does ends up only taking a fraction of the width of my page.

With item-end: enter image description here

With item-content: enter image description here

I want the custom-input to be 100% width (e.g. text editor)

Solution

Inspired by the double item idea from @Sampath:

<ion-item no-lines>
  <ion-label>Content</ion-label>
</ion-item>
<ion-item>
  <custom-input formControlName="content"></custom-input>
</ion-item>
ionic2 ionic3 angular typescript
2 Answers

You need to add item-end attribute like below.

That's because ion-item component has predefined set of selectors that can be used to transclude inside that component

official Git Repo

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

If you need to use full width then:

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

I tried as follows and working smart, please try and update any other good methods.

<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>
user_81178490
Related