Having problem with Header Inputs!

ionic-v1
1

I am having problem with input tag. For example when I i run the header input from the doc this is how it looks like in my phone.

Also if you try to include a submit and cancel icon this is how it looks like.

I am running the app in Galaxy Note 2 that runs on Android 4.3.

2

Can you post the code you used for your header? Also, which version of ionic are you using, beta 3?

3

I created project using ionic start myApp tabs and then in the dashboard template I included the below html.

Also, today i updated my css file to “Ionic, v1.0.0-beta.3-nightly-1966” and the first image worked fine, however the second image did not change. Here is the html I used for the second image:

  <ion-content>
        <div class="bar bar-header item-input-inset">
            <label class="item-input-wrapper" placeholder="Search a user" filter="search">
                <i class="icon ion-ios7-search placeholder-icon"></i>
                <input type="search" placeholder="Search a user" ng-model="searchKey">
                <button class="button button-clear" ng-click="clearSearch()">X</button>
            </label>
            <button class="button button-clear" ng-click="search()">Search</button>
        </div>
  </ion-content>

This only happens if I have an extra tag after the input tag inside the label!

Thank you for your help :smile:

4

Hmm I wasn’t able to reproduce in on my end. I set up a codepen, anyway you could give my code a try? It’s a bit different than yours but still the same pattern

5

Thanks for the code. Everything works fine in the browser. However, when I try it in my phone it changes as shown in the second image. My phone runs on android 4.3 (Galaxy Note 2).

6

Here is how it looks like. I tried it with nightly build (Ionic, v1.0.0-beta.4-nightly-2017). Again I am trying this it in my Galaxy Note 2. Any help please?

7

Guys, I think my problem is similar to this. But, I’m putting this header input into a <ion-footer-bar>.

It is working on the browser, iOS and and on Android 4.4.2

When the keyboard is open

But, the problem is with the Android 4.3, the input is unaligned

The code I’m using is this:

  ...

  </ion-content>
  <ion-footer-bar>
    <form class="comments-input-wrapper bar-footer item-input-inset" novalidate name="formComment">
      <label class="item-input-wrapper">
        <input type="text" placeholder="Comentário..." required name="comment" ng-model="comment.comment">
      </label>

      <button type="submit" class="button button-clear icon ion-ios7-paperplane"></button>
    </form>
  </ion-footer-bar>
</ion-view>

Somebody know what I’m doing wrong?

8

Yes exactly! It works on browser, but not android 4.3!

9

I fixed my problem adding .bar class…

  ...
    <form class="bar bar-footer item-input-inset">

Now it is perfectly aligned, btw I’m using beta-5

10

I fixed my problem too adding .bar class

    <div class="header-search bar">
        <label>
            <i class="icon ion-ios7-search placeholder-icon"></i> 
            <input type="search" ng-model="product.name">
        </label>
    </div>