Buttons inside ion-row are pushed up in ios but in android it shows fine?

Ionic Framework ionic-v3
1

Hi guys, I dont know why in ios would push my icon-only buttons upwards and also they are halfcut, while in android it looks perfect.

android:

Screenshot_android
Screenshot_android.png1426×2449 150 KB

ios:

ios_shifted
ios_shifted.png1615×2766 242 KB

codes:

<ion-grid>
 <form #f="ngForm" (ngSubmit)="send_text(f)" novalidate>
<ion-row  *ngIf="image == '' && recording == false" style="justify-content:center; display:flex;">
<ion-col col-7>
<ion-textarea class='send_row_input' start #title type="text" name="message" ngModel required ></ion-textarea>
</ion-col>
<ion-col col-2>
<button type="submit" class="chat_buttons" [disabled]='!f.valid' ion-button end clear icon-only ><ion-icon name="send"></ion-icon></button>
</ion-col>
<ion-col col-1>
<button *ngIf="recording == false" type="button" class="chat_buttons"  ion-button end clear icon-only [disabled]='audio_message_playing == true' (click)="record_audio()"><ion-icon name="mic"></ion-icon></button>
</ion-col>

<ion-col col-2>

<button type="button" class="chat_buttons" ion-button clear icon-only [disabled]='audio_message_playing == true' (click)="choose_image()"><ion-icon name="image"></ion-icon></button>
</ion-col>

  </ion-row>
 </form>
</ion-grid>

css:

.chat_buttons{

width:100%;
height: 100%;

}
2

Hi @mikethetechy,

You can try the css using platform specific task. In ionic in body tag you can have different class based on the platform. So may be you can add platform specific css and correct your issue.

1 Like
3

@addwebsolution thx! for the reply. I was only using platform specific codes in my controller. haven’t thought i could do that in the view with css.
after searching how to write platform specific css i found this example:

.platform-ios . bar-custom{
  background: green;
}

.platform-android . bar-custom{
  background: blue;
}

is this the right way? do i have to install any specific plugin to make this work?
thx once again for the reply

4

@mikethetechy,

Platform specific classes are used for such purposes only. So yes, its perfectly fine if we use them inside css.

Its not a good practice that we should use extra plugin for such small scale requirements.

Hope my answer has clarify your doubt.

1 Like
5

@addwebsolution thxx a lot. I will use the platform specific css :smiley: . have a great day!