I am using the item note, like seen here, to add a little note to the right of a list item. However, if the note is too long, then it the list item expands vertically and doesn’t look good. I know I can probably do something with some custom css but I was wondering if there was something built into ionic for this already?
You mean something like this?
Not exactly, but close. I am using the <span class="item-note> like in this:
http://codepen.io/niltz/pen/FHyqI
If you make your browser 1450px wide, notice how the item label (“Item 1”, “Item 2”, etc) is left aligned, and then the item note (“Lorem ipsum dolor sit amet…”) is right aligned on a new line. And it looks weird.
I was wondering if there was a way to crop the note/or have the note auto scroll, or something, so that it is on the same line as the label even when it is too long.
You mean like this?
Yep, that seems to do the trick. Thanks!
That works if you want the note to be left aligned next to the item text, but it does not preserve the iOS style of right justified content. If some of the notes are short then they will appear left justified.
I am running into this problem when the note content is only slightly larger than the available space as it causes wrapping and layout problems for the buttons.
Can you create a codepen of your situation?
The updated codepen you posted (http://codepen.io/mhartington/pen/gFmnD) shows the condition. The item-note text is left justified next to the item title rather than being right justified in the overall item (like in native iOS apps). My goal is to mimic the iOS style and have long text get clipped but short text be right justified.
You could try this
Note that it’s not perfect, but it should get you in the right direction