For iOS only, the checkbox label does not respond.

I would like to create a check box using the sample Material List with Checkboxes component (http://components.onsen.io/) found in the CSS component, but only iOS label does not respond well.I use the sample code as it is.

It seems to work if I delete the onsenui.min.js that I read together, but I would like to make it work without deleting it.
I don't think I can solve it myself because I don't have enough knowledge.
I look forward to your kind cooperation.

<!DOCTYPE HTML>
<html>
<head>
  <metacharset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
  <meta http-equiv="Content-Security-Policy" content="default-src*data:;style-src*'unsafe-inline';script-src*'unsafe-inline'"unsafe-eval'">

  <link rel="stylesheet" href="onsenui.css">
  <link rel="stylesheet" href="onsen-css-components.css">

</head>
<body>

<ul class="list list --material">
  <lic class="list__item list__item --material">
    <div class="list__item_leftlist__item --material__left">
      <label class="checkbox checkbox --material">
        <input type="checkbox" id="checkbox3" class="checkbox__input checkbox --material__input">
        <div class="checkbox__checkmark checkbox --material__checkmark">/div>
      </label>
    </div>

    <label for="checkbox3" class="list__item__center list_item --material__center">
      <div class="list__item__title list__item --material__title">Notifications</div>
      <div class="list__item__subtitle list__item --material__subtitle">Allow notifications</div>
    </label>
  </li>

  <lic class="list__item list__item --material">
    <div class="list__item_leftlist__item --material__left">
      <label class="checkbox checkbox --material">
        <input type="checkbox" id="checkbox4" class="checkbox__input checkbox --material__input"checked="checkbox">
        <div class="checkbox__checkmark checkbox --material__checkmark">/div>
      </label>
    </div>

    <label for="checkbox4" class="list__item__center list_item --material__center">
      <div class="list__item__title list__item --material__title">Sound</div>
      <div class="list__item__subtitle list__item --material__subtitle">Hangouts message</div>
    </label>
  </li>

</ul>

<script src="onsenui.min.js"></script>

</body>
</html>

onsen-ui

2022-09-30 21:21

1 Answers

This is due to a bug in FastClick, a library used inside the Onsen UI, and after loading onsenui.min.js,

ons.fastClick.destroy();

First aid is provided by performing .
Answer from Onsen UI development team.

2022-09-30 21:21

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656