How to ion-option-button with text under/below icon?

1

Hi,

Have looked and looked and can’t seem to find any previous examples or tips where you can create a list with an option-button and have the icon appear above the text (the text being under/below the icon) in a similar way to the image here.

2

Just look at the tabs. The tabs have exactly what you want.

image
Screen Shot 2016-04-02 at 12.42.23 PM.png2014×508 140 KB

3

Mmmm, my tabs don’t have those classes. I’m using 1.2 of the framework and even when looking at that versions Tabs, the styles aren’t obvious to me what I need to do - adding the tab-title style didn’t work but I didn’t think it would given it would need to be part of the tab item style hierarchy.

Any other ideas or am I looking at some serious custom CSS work ???

8

Try overriding CSS style, display ion-option-button as inline-block rather than inline-flex.

    <ion-option-button style="display: inline-block !important; font-size: 14px; line-height: 10px; padding: 5px;">
      <i class="icon ion-ios-trash-outline" style="display: block !important;"></i>
      <span>Trash</span>
    </ion-option-button>