Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
OnsenUI 2.0 - Tap on tappable ons-list-item can't check inner radio input
-
<ons-list-item tappable> <ons-input type="radio"></ons-input> </ons-list-item>
Because of
tappable
attribute, tap on anywhere ofons-list-item
should check the innerinput[type='radio']
ofons-input
. When I switch to CSS radio-button, the innerinput[type='radio']
doesn’t checked unless tap onLabel
. The code is in below.<ons-list-item tappable> <label class="radio-button radio-button--list-item"> <input type="radio" class="radio-button__input" name="a" value="Male"> <div class="radio-button__checkmark radio-button--list-item__checkmark"></div> Male </label> </ons-list-item>
-
@honglio Hello!
tappable
attribute only adds styles. It does not modify the behavior of the element in case it contains inputs, and we don’t plan to do it.However, it’s quite easy to make what you want to do without using those CSS classes. Have a look at this article and read the section “Improved list items” and “Extended ons-input”.
-
@Fran-Diox Does
ons-input
support other attribute than ID which set to its inner input?
-
@honglio It maps all the important attributes to the inner input so you can use
ons-input
as if it was a normal input. For example,<ons-input type="checkbox" checked></ons-input>
will check the checkbox.
-
@Fran-Diox I try to add custom attribute in
ons-input
, like…
<ons-input type="radio" v-model="foobar"></ons-input>
Butv-model
doesn’t map to inner input. :(
-
@honglio Well, I said “important attributes”. With that I meant normal attributes for
<input>
, not custom ones.