Ion-note under ion-label

Ionic Framework ionic-v3
1

Hello everyone,

I’m trying to place an ion-note under the ion-label element. The docs clearly state that it creates an element on the left or right side of an item, but you see it under de label in Android app everywhere. For example:

Screenshot_20171130-214214
Screenshot_20171130-214214.png1080×1920 108 KB

What is the best practice to archieve this in any other way?

Thanks in advance!

Nathan

2

Maybe an ion-item with 2 ion-labels, the first one being stacked

<ion-item>
<ion-label stacked> Recent </ion-label>
<ion-label> settings you changed recently </ion-label>
</ion-item>
1 Like
3

That would be genius, gonna try it asap :slight_smile:

4

Might need to add classes to the labels to manipulate font-size to your liking in the component scss file, but it should work out.

5

You can use html tags like <h2> and <p> inside <ion-item>. For example:

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/avatar-finn.png">
    </ion-avatar>
    <h2>Finn</h2>
    <h3>Don't Know What To Do!</h3>
    <p>I've had a pretty messed up day. If we just...</p>
  </ion-item>
</ion-list>

See https://ionicframework.com/docs/components/#multiline-list

6

image
image.jpg456×818 46.5 KB 

.ion-item-button{
  background-color: color($colors, dark);

  .ion-label-stacked{
    color: white;
    font-size:1.8rem;
  }
  .ion-label{
    margin-top:0px;
    color:lightgray;
    font-size:1.2rem;
  }
}

This is the result. It still feels like a ‘hack’ because i’m increasing stacked size and decreasing normal text-size.
Will try pwespi’s later this weekend.

7

Looks good. I personally don’t mind hacking a bit to get what i want, but, can’t knock you for it! Post the results when you try @pwespi’s suggestion if you can.

A quick look at the link pwepsi provided does look like it might be a cleaner solution for sure

8

Well me neither, whatever it takes to get it working right? Maybe I need to add a few pixels margin-top to make it look even better.

9

Definitely. Besides, there’s a difference between writing ‘hacky’ code and using the tools available to you.

Using your scss file to manipulate pixels, font, sizing, is just using those tools that are provided.

10

It’s silly because I saw this part of the documentation like a week ago. Anyway, in this case it doesn’t work. Maybe because this are ion-item-buttons. Could have fixed height or something I don’t know.

@anyone, aside from this css code working fine. Where could I request a features like this? Is GitHub the place to be?

11

This is working fine for me:

<ion-item>
    <ion-label>
        <h2>Recent</h2>
        <ion-note>Settings you changed recently</ion-note>
    </ion-label>
</ion-item>

No CSS needed.

4 Likes
12

Well the difference might be that you are using ion-items, not ion-item-buttons as I do. I think ion-items can have endless height, well ion-item-button cannot.

13

ion-item-button? I did not know this ionic component exists.

In the documentation, where did you find it?

14

My bad, there is non. You can give the an button an ion-item attribute, resulting in the list buttons a seen in the screenshot.