Item-button-right class is broken (position+dimension)

ionic-v1
1

(I’ve tested this on 0.9.27, beta1, beta2, beta3, and nightly{1960})

I’m trying to make a list that has a button visible at all times, and two other optionButtons bellow accessible through swipe. I didn’t have the ionOptionButtons until now because I was waiting on the change of the syntax for the ionList to be refactored (as it was recently, thanks!). And now that I’m starting to implementing it, I had to change from

<div class="list">
  <div class="item item-button-right" ng-repeat="item in itemList">
    <h2>Text</h2>
    <p>Moar Text</p>
    <button class="button button-assertive">Inline button</button>
  </div>
</div>

to this:

<ion-list>
  <ion-item class="item item-button-right" ng-repeat="item in itemList">
    <h2>Text</h2>
    <p>Moar Text</p>
    <button class="button button-assertive">Inline button</button>
    <ion-option-button class="button button-assertive">Option button</ion-option-button>
  </ion-item>
</ion-list>

because swipe functionality doesn’t come on pure class markup. While doing that, I found out that the div structure that ion-item creates at the end doesn’t work with item-button-right. The space that the main body of the item creates at it’s right is left empty, and the button (that should be using that space on the right) is at a strange position. This causes another issue with the swipe gesture and the appearance of the ionOptionButton: as soon as I start swipping, the ionOptionButton is completely visible, occupying the space on the right that was created by the main item div (the one I mentioned couple of lines above).

It’s important to note that the issue with ionOptionButton is NOT what causes the issue with the item-button-right class, it’s actually the other way around. You can comment out the ionOptionButton on the codepen example to see that the item-button-right still messes up.

2

I created an issue on github for this. Looking forward to an answer on either places :smile:

3

Hey sorry about that, it must have slipped by me. So your button it actually positioned absolutly:

.item-button-right .item-content>.button, .item-button-right .item-content>.buttons, .item-button-right>.button, .item-button-right>.buttons {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    position: absolute;
    top: 8px;
    right: 15px;
    min-width: 34px;
    min-height: 34px;
    font-size: 18px;
    line-height: 32px;
}

So its positioned to look centered with only one line of text. A simple change in the css should handle it.

.my-item.item-button-right .item-content>.button, 
.my-item.item-button-right .item-content>.buttons, 
.my-item.item-button-right>.button, 
.my-item.item-button-right>.buttons{
  top:17px !important;
}
4

Oh, that’s not what I meant, sorry if I didn’t make myself clear enough (although you made a valid point on that vertical alignment).

I’m talking about the button’s position on the x-axis.
Compare the buttons on the ion-items with the first button on the example which is made using pure html markup + ionic css, you’ll see the ones made using ion-list>ion-item have a padding to the right that was supposed to be used by the button itself but itsn’t. That gap is left blank and no contenct can ever go there. Also, if you enable a ion-option-button on the list you’ll see the show/hide of the ion-option-button through swipe is broken, caused by the gap mentioned above.

5

Hmm, messing around I found that it’s caused by the div.item-content layer constructed by the ion-item directive. It has position: relative applied to itself, which causes the absolute positioning of the .item-button-right .item-content>.button selector to not be applied as expected.

The constructed structure is .item.item-button-right>.item-content>button, and the button wants to position itself absolutely in relation to the .item.item-button-right (which is it’s parent in the pure css version), but ends up being positioned in relation to the .item-content because it is a positioned element. Applying position: static; to the item-content selector fixes it, but the ion-option-button is then broken with this new set up.

Ultimately, I imagine the solution would be to delegate the behaviour of the .item to the .item-content when it’s a construct of the directive and not a pure markup. That way the button would have a valid positioned parent and the underlaying ion-option-button would still work.

I’m sure I made this post longer than it needed to be though, and I’m sorry for that :sweat_smile:.

6

AHHH I see what you mean now! HA no worries. That is an odd issue, but it can be resolved by overriding some of the css.

.item-complex{
  padding-right: 0 !important;
}
7

Nice find, solves it on most cases. Thanks!

However, I don’t think that’s all there is to it… and now I realize that the flex grid would be the best way to deal with it, probably. More yet, it’s probably the best way to deal with all combinations of list item elements.

You see, with that override the item-content now overlaps with the button depending on how wide the button is, and if you increase the width of the content inside the item, you’ll see that it hides beneath the button and can’t be seen or wrapped soon enough.
I know that’s easy to overcome by just taking care of content on my own, but it might bring some headache down the road for Ionic.

Thanks again, as this solution will do until something better comes out or I stumble on another issue related to my content.

8

@mhartington The issue related to this was closed on github but there was no commit closing that. Should I keep your suggested hotfix on my code for now or was it fixed in Ionic somehow?

9

Seems like that padding is still there, though I’m not 100% sure why. I’d keep the hot fix right now, I’ll ping the devs about it and find out the logic behind it. Mind sharing the link to the Github issue?

https://github.com/driftyco/ionic/blob/master/scss/_items.scss#L355

10

https://github.com/driftyco/ionic/issues/1327, the link is also on the second comment in this topic.

About that padding, taking a quick look at the code I found that .item-complex has padding: 0 set here.

Actually, I spent 2 minutes and found the source of it. The common sense is that every custom item selector (item-button-right, item-thumbnail-right, etc) should apply the desired padding to itself but clear the item-complex selector from this value and delegate it to item-content when item-complex is in place. However, on that exact piece of code you linked on the sass file, the item-button-right doesn’t follow such common sense, and so the item-complex case with item-button-right has extra padding.

Taking a better look at the _item.scss tells that there are other complex item types that don’t abide to this, but I can see that some of them doesn’t need to. I think a better look on this aspect is in need anyway though, we might be overlooking another bug related to complex items on this.

11

I apologize if what I am writing is trivial, I am beginner on this area,
but

I have seen that if you delete completely the option button from the html source (not just comment it), the ion-button-right will position correctly.

That make me think there is a double bug here, one in Codepen and one in Ionic.

I have the same problem that you mentioned in my code, between item-button-left and ionOptionButton.
Reading all the thread I didn’t understand if there is a simple solution to use both kind of buttons in the same ion-item. Any suggestion?

Many thanks
Francesco