Inconsistent aspect between browser and device

ionic-v1
1

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>
        <label class="item item-input">
          <span class="input-label">Subject</span>
          <input type="text" name="subject" ng-model="subject" ng-change="onChange('subject', subject);">
        </label>
      </div>
      <div class="card card-error" ng-show="!settings.email.$pristine && !settings.email.$valid">
        <div class="item item-text-wrap">
          The email is not valid!
        </div>
      </div>
    </form>
  </ion-content>
</ion-view>

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?

2

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

3

Anyone on the staff can say something about this?

4

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

5

Hi Martin,

This is really weird. Here you may find the codepen: http://codepen.io/Belelros/pen/FAose

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.

6

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.

7

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