CSS breaks on emulator and ion view app


#1

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?


#2

First read this article:

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


#3

@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,

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?


#4

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


#5

border radius applied

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


#6

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


#7

sent app ID via private message


#8

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;
}


#9

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?


#10

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


#11

Good to know. I really appreciate it!