I have the following code for the ActionBar
<ActionBar title="" class="action-bar">
<NavigationButton
(tap)="toggleDrawer()"
class="action-bar-item"
ios:visibility="collapsed"
icon="res://menu">
</NavigationButton>
<ActionItem
icon="res://menu"
android:visibility="collapsed"
(tap)="toggleDrawer()"
ios.position="left">
</ActionItem>
<StackLayout class="action-item" android:horizontalAlignment="center" ios:horizontalAlignment="center">
<Image src="res://ideas_wt_full" width="60%" height="60%" [visibility]="android ? 'visible' : 'collapsed'"></Image>
<Image src="res://ideas_wt_full" width="30%" height="30%" stretch="aspectFill" [visibility]="!android ? 'visible' : 'collapsed'"></Image>
</StackLayout>
<ActionItem android.systemIcon="ic_menu_search" ios.systemIcon="12" ios.position="right"></ActionItem>
</ActionBar>
Everything is fine on Android, but on iOS the image is showing in full resolution so it’s so big for the ActionBar.
Any help is appreciated!!
I fixed the issue setting fixed values for the width and height. So I created a class for the image and set those properties in css. Additionally, I had to careful with the height on iOS, because due the limitations with the ActionBar styles, it doesn't change the height of the action bar and I needed to set a height of 80px.