[SOLVED] Ion-item question and "weird" android css

I have some questions about the ion-item css and also some weird effects on Android.

For the purpose of following example, I removed all my custom css codes.
I use Crosswalk for Android and UIWebView for iOS.

The test code is the following:

<ion-header>
<ion-navbar>
<ion-title>TEST</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>

<ion-grid>

<ion-row>
  <ion-col width-100>
    <ion-item>
      <ion-icon name="pin" item-left></ion-icon>
      <ion-input type="text" placeholder="Test"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col width-100>
    <ion-list>
      <ion-item>
        <ion-icon name="pin" item-left></ion-icon>
        <ion-input type="text" placeholder="Test"></ion-input>
      </ion-item>
    </ion-list>
  </ion-col>
</ion-row>

...

</ion-grid>
</ion-content>

In Chrome debug, this look like following:

So my first question is:

1 Why this difference between an ion-item with or without ion-list? Respectively, why the bottom line when field is selected isn’t be displayed the same way, doesn’t fill the all space like with using ion-list? Is there a special reason?

For my second questions, here’s a screenshot of the App on Android (6.0):

2 While running the app on my android phone, I noticed a weird left-margin (sometimes even just a half sized left-margin) which I didn’t while debugging. Anyone noticed that too? Any clue how to solve it aka to doesn’t display that glitch?

And the screenshots for iOS

3 Is there a reason on iOS why, when a such field is selected, no bottom-line are displayed? Is that a common iOS best practice behavior? If not, how could I fix it?

Thx in advance for your feedback

As a general rule, I would suggest you to always use ion-item with ion-list when you are using multiple items.

More information in the Item API

Actually I read somewhere, if I remember correctly, on the forum that @brandyshea from the ionic team specified that ion-item don’t have to be use explicitly with a ion-list. But thx for the comment.

Anyway, ion-list or not, my question 2 (strange left color on android) remain

Ah, if she said so then. But I’ve got bad experience using ion-item outside list, usually have strange behavior (that can probably be explained but not willing to dig this part… :p)

Ok thx for the note. Anyway I also rather like to have a full line when the input is selected, so I tend to use them with ion-list each time too…just really want to solve the issue with the weird left border :frowning:

@reedrichards Regarding the usage of <ion-item> I would recommend you to check out this post:

The strange left-border/margin on Android might be a bug or a result of incorrect usage of the component.

Looking at your code sample I’m wondering why are you using ion-grid at all when you specify width-100 - try using only ion-list.

hey @iignatov, you’re right, the ion-grid makes no sense there, thx. about the comment, is exactly what I read, thx for finding it again.

still with or without ion-grid, the strange left-border/margin on Android still occurs, so that is still open for me. what’s strange too, is that happens even with the default css with none of mine. so did someone experienced that and found a solution?

futhermore, my two other questions regarding the display of the bottom line when a field is selected remains open too

Sounds like a bug – could you open an issue about this?

I’m not sure about this. I couldn’t reproduce it in Plunker. Could you provide a Plunker (using this template) showing the problem?

Yep, good idea. https://github.com/driftyco/ionic/issues/8023

1 Like

Freak, neither I could too. Ok well then let’s assume that the problem was between my screen and my keyboard or that I had/have somewhere another css parasitizing the display. Sorry for loosing your time.

Actually the plunker is using beta.10, i.e. it hasn’t been updated for beta.11. Therefore it could possibly be a bug in beta.11. If it’s breaking your app you could open an issue about it (and I would recommend to include a link to a Github repo where the problem can be easily reproduced), otherwise you could just wait for beta.12 and see if the problem still persists.

Thx for the feedback :slight_smile: Yep I opened an issue, let’s see what happens…

Mmmmh seems I solve the problem. Don’t know how exactly because I made so much change in my css but seems that fixing the overflow of the slider (my input are inside a slider) fixed it

So I gonna mark the task as close

Ok, great, I’m glad you figured it out.