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

[reedrichards]

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

[schankam]

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

[reedrichards]

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

[schankam]

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)

[reedrichards]

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

[iignatov]

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

Confused about ion-item usage

I am currently in the process of improving the Item API docs to include more descriptions and examples. I will make sure to include some documentation to clear this up. An ion-item can be used outside of an ion-list if you do not plan on using gestures with it. Therefore, if you are using sliding items you do need an ion-list. You cannot currently nest an ion-list inside of an ion-item but you can place an ion-grid in an ion-item. The elements are aligned horizontal, except in the case of stac…

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.

[reedrichards]

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

[iignatov]

@reedrichards

with or without ion-grid, the strange left-border/margin on Android still occurs

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

@reedrichards

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

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

[reedrichards]

@iignatov

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

Yep, good idea. CSS: Weird left margin in ion-input on Android · Issue #8023 · ionic-team/ionic-framework · GitHub

[reedrichards]

@iignatov

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

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.

[iignatov]

@reedrichards

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.

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.

[reedrichards]

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

[reedrichards]

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

[iignatov]

@reedrichards

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

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