Inconsistent aspect between browser and device

Hi there!

I’ve added inlined form elements to one page. The code looks like this:

<ion-view title="Settings" hide-back-button="false" class="slide-left-right-ios7">
  <ion-content padding="true">
    <form action="" name="settings">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Email</span>
          <input type="email" name="email" ng-model="email" required ng-change="onChange('email', email);">
        <label class="item item-input">
          <span class="input-label">Subject</span>
          <input type="text" name="subject" ng-model="subject" ng-change="onChange('subject', subject);">
      <div class="card card-error" ng-show="!$pristine && !$valid">
        <div class="item item-text-wrap">
          The email is not valid!

This looks alright on the browser, when on development on the iPhone:

However, on the actual device or on the simulator but inside of the webview:

Note that the first input looks alright always so I’m not sure what could be wrong. Does anybody have any ideas?

I have a similar sizing issue on Android. The apk displays about 20-30% bigger. Looking for clues as to how to control that.

Anyone on the staff can say something about this?

Hmm that is definitely interesting. Is there any other kinds of information you could provide? Viewport tag, cordova version, ionic version. Also, could you throw together a codepen? I can take a more indepth look at it

Hi Martin,

This is really weird. Here you may find the codepen:

Ionic version is v1.0.0-beta.6 and Cordova’s 3.5.0-0.2.4. The issue happens on all iOS devices (I don’t build for Android yet).

This being said, I created a new project with ionic start and threw this same code and got no borders. So I thought, well it has to be my CSS. Then I removed all the CSS and just left the basic ionic file and tried again: no dice. Still happening.

Then I tried playing a little bit further and discovered that it is the type="text". Changing to type="email" for example , does work and doesn’t add any border.

I tried to add the platform-cordova CSS while emulating on Chrome an iOS device to see if that could be it, a rule just applied to cordova, but it isn’t either.

So, I am out of guesses.

I’ve found the offender: ngTemplates for Grunt is doing something weird. Will post more as soon as I find some answers…

Turns out that the recommended minification settings for the template are the ones that makes it look ugly.

I also faced the same issue, making option removeRedundantAttributes false worked fine