Ion-option-button look bad with transparent background


#1

how can i display ion-option-button according to position changed

here is my codepan http://codepen.io/chnbohwr/pen/denEI

body backgorund is yellow

item background is transparent


#2

some body can help me this problem ?


#3

I was able to resolve this temporarily by setting the background colors to be yellow instead of transparent on the item content.


#4

but when i use background image it looks bad

in my project , i am not use color yellow

so~ any one has ideal ?


#5

It’s just CSS. So, if you target the right classes, you can modify.

See : http://codepen.io/calendee/pen/Gcexa : This is a really rough sample, so just modify it for a style that fits you.

Be sure to adjust the active class as well.

ion-option-button.button.button-assertive {
  font-size:22px;
  background: transparent;
  color : #111;
}

ion-option-button.button.button-calm {
  font-size:22px;
  background: transparent;
  color : #111;
}

#6

change button css to transparent is a good ideal

but when You swipe to right the button will show !!


#7

I’m not sure what you mean by that. When I swipe right to expose the buttons, I just get text because I made the background transparent.

Admittedly, when you click a button, it’s “active” state shows the button background for that state, but I mentioned that in the original post. You will need to look at the CSS and modify it to suit your needs.


#8

I think what he means is that when you swipe right, you don’t get that smooth reveal effect on the anymore.


#9

thanks everyone helping me

My question is swipe right should not trigger the button show event