[6.0.0-rc.0] can the ion-item `counter` be customized/stylized?

Ionic Framework Ionic Angular
1

I would like the counter element to appear aligning to the right side of the input, instead of the default left side (LTR).

When I have an <ion-label slot="error"> and the input is invalid, the error label appears and pushes the counter to exactly where I want it to appear now.
By controlling its position, it would not only it be on the opposite side of the input, but also remain stationary.

As of 6.0.0-rc.0, it is not a shadowDOM ::part nor is it an exposed CSS variable.
I have been poking around with my dev tools trying to find a work around since it is not an actual DOM element on my template.

I just wonder if it is an adjustment anyone else was trying to make as well

@ldebeasi @mhartington would this be something coming as the RC gets rolled out? I didnt know if this would merit a feature request

2

Do you have a code example I can look at?

3

In item 1 and 2, its just the counter, appearing aligned to left/start
in item 3 and 4, the minlength validator exposes the error slot and helper slot ion-label both push the counter to align right/end.

It just looks like there is no way to control position/styling of the counter yet.

also in doing so it looks like theres a bug with the floating/stacked position when error and helper are visible too…I included a screenshot

TS

public items: FormGroup;
ngOnInit() {
    this.items = this.fb.group({
      item1: ['item 11111111111'],
      item2: ['item 2222222222'],
      item3: ['item 3333', [Validators.minLength(10)]],
      item4: ['item 4444', [Validators.minLength(10)]]
    })
  }


HTML

<ion-item lines="full" class="ion-margin-bottom" counter>
    <ion-label position="stacked">Item1: stacked</ion-label>
    <ion-input  maxlength="32" formControlName="item1" type="text"></ion-input>
</ion-item>
<ion-item lines="full" class="ion-margin-bottom" counter>
    <ion-label position="floating">Item2: floating</ion-label>
    <ion-input  maxlength="32" formControlName="item2" type="text"></ion-input>
</ion-item>

<ion-item lines="full" class="ion-margin-bottom" counter>
    <ion-label position="stacked">Item3: stacked</ion-label>
    <ion-input  maxlength="32" formControlName="item3" type="text"></ion-input>
    <ion-label slot="error" *ngIf="items.get('item3').errors?.minlength">Min length: 10 char</ion-label>
</ion-item>
<ion-item lines="full" class="ion-margin-bottom" counter>
    <ion-label position="floating">Item4: floating</ion-label>
    <ion-input  maxlength="32" formControlName="item4" type="text"></ion-input>
    <ion-label slot="helper">Min length: 10 char</ion-label>
</ion-item>

ionic2

4

Try using ion-note instead of ion-label for the helper slots. There is only supposed to be one ion-label per ion-item.

1 Like
5

ok - ion-note takes care of the secondary problem! good to know about the ion-labels, i dont think i ever realized that :upside_down_face:

but there still does not appear to be any control for styling the counter element.
According to the MD docs, the counter appears right/end in their examples, as well.

maybe adding a string value to the counter a la counter="start|end|undefined"?
and anything for ::part(counter) or counter css variables

6

Yeah it does not look like you can customize that at the moment. If we added a ::part to .item-bottom here: ionic-framework/item.tsx at e3996cfbd50f5e9ae54ffcbe2594124e3b9969b0 · ionic-team/ionic-framework · GitHub developers could customize the flex alignment to get the behavior they wanted. Alternatively, we could add an alignment property as you suggested.

Definitely seems like a good fit for Ionic to handle. Could you create a feature request here? Issues · ionic-team/ionic-framework · GitHub