Control Spacing between ActionBar ActionItems


#1

I can’t seem to find a way to control the spacing between ActionItems when using the ActionBar component. The default spacing in iOS seems weird to me and I’d like to reduce it. Putting only one ActionItem to the left / right is not an option for this app. A solution utilizing iOS API’s in the code behind file would be perfectly fine to me but I’m not really sure how to go about it and what would be a elegant solution. (e.g. maintaining the ability to define event listeners in the .html file)

48

<ActionBar title="Title" class="action-bar">
    <NavigationButton icon="res://ic_arrow_back_white_24dp" (tap)="goBack()"></NavigationButton>
    <ActionItem [icon]="isAndroid ? 'res://ic_search_white_24dp' : 'res://ic_search_white'" ios.position="right"></ActionItem>
    <ActionItem [icon]="isAndroid ? 'res://ic_more_vert_white_24dp' : 'res://ic_menu_white'" ios.position="right"></ActionItem>
</ActionBar>

#2

We fixed space between actionitem in ios by putting Label inside (we are actually using fonticon pipe to put custom icons) and then apply width on that label, width=35-40 worked great for us.


#3

Cool, thank you @davorpeic !