CSS breaks on emulator and ion view app

CSS breaks on emulator and ion view app…

I put -webkit- in front of transform stuff or transition stuff… but
Should I put every single CSS property with prefix of -webkit- to work property in Ionic?

First read this article:

You need to give us more information, this is simply not enough.

@Gajotres sorry if that was not enough.

So I have this CSS below for my input and button element.

> .map-post-box {
>     display: inline-block;
>     margin-bottom:28px;
> }


> #map-btn-submit {
>     width:58px;
>     height:36px;

>     min-height: 36px;

>     padding-top: 0px;
>     padding-bottom: 0px;
>     padding-left: 4px;
>     padding-right: 4px;
> }

and my HTML below

<!-- Posting -->
    <form ng-controller='SomeCtrl' name='postForm' novalidate>
      <input type='text'
          ng-model='content'
          ng-focus='moveToPostLocation()'
          maxlength='20'
          class='map-post-box'
          id='map-post-input'
          placeholder='Gajotres is cool guy' required>
      <button ng-disabled='postForm.$invalid'
          ng-click='addPost()'
          class="map-post-box button button-small button-assertive" 
          id='map-btn-submit'> {{ timevalue | date:"mm : ss" }} </button>
    </form>

and it shows up correctly as you see img below,

image

but when I run emulator or ion view my “ionic upload”,

it becomes like this below.
Can you notice that there is somehow border-radius with some value is applied to make it rounded for input element?

Can you please send me Ionic View ID of this application, I would like to see it myself?

border radius applied
image

what it should be look like (and working for ionic serve)

image

Can you please send me ID of your Ionic View application?

sent app ID via private message

Tell me are you testing this on iOS? If your answer is yes then this is an iOS problem.

This should solve it:

input {
-webkit-border-radius:0;
border-radius:0;
}

Thanks!

so ionic actually put border radius by default?

because I dont even have border-radius:0; as well.

Would that work on android as well?

This is not Ionic problem, this is how iOS webview shows input fields by default.

Good to know. I really appreciate it!

1 Like