5 Replies Latest reply on Jan 8, 2013 5:51 AM by Thomas Howard

    Checkbox in RhoElements

      Is anyone else having difficulties with checkboxes in RhoElements? We're using RE as a browser to hit our mobile site, which has various standard controls on it. We're finding the checkboxes very difficult to trigger. When hitting the site using the standard browser, it works fine, but with RhoElements you have to hit the checkbox several times trying to find just the right spot for it to trigger.

       

      We've experienced this on ET1 running the latest Android version of Rho as well as MC55 running the Windows version.

       

      Thanks

      -tom

        • Re: Checkbox in RhoElements
          Darryn Campbell

          Hi,

           

          Couple of questions:

          1) Is this a site which uses JQueryMobile?  We've had reports that our WebKit is very sensitive to movement during button presses, so the issue could be related. 

          2) Have you tried re-calibrating the screen, at least on the Windows Mobile device?

           

          Personally I've never had an issue with this.

           

          Thanks

            • Re: Checkbox in RhoElements

              No, we're not using JQuery Mobile. We have tried recalibrating the windows device, but we're really targeting Android. I am working on getting some screen shots, but that won't really demonstrate the usability issues.

                • Re: Checkbox in RhoElements
                  Benedict Kennedy

                  Hi Tom,

                   

                  The default target size for a checkbox is very small. I feel your pain, it is really difficult to activate. If you associate the checkbox with a label, the label will become part of the target size. You can then increase either the checkbox or the label size with CSS,

                   

                  To associate a checkbox and label, give the checkbox an id, and set the label element's "for" attribute to the id of the checkbox.

                   

                  Here is an example of labels associated with checkboxes, with the label size increased and (awfully!) coloured by CSS. I have also put the checkbox inside the label so it appears nicely.

                   

                  <!DOCTYPE html>
                  <html>
                  <head>
                            <style>
                                      *
                                      {
                                                font-family: 'Arial', sans;
                                      }
                                      label
                                      {
                                                display:block;
                                                background: yellow;
                                                border: 1px solid red;
                                                padding: 5px;
                                                border-collapse: collapse;
                                      }
                                      input[type="checkbox"]
                                      {
                                                margin: 2px;
                                      }
                            </style>
                  </head>
                  <body>
                            <form action="">
                                      <label for="bike"><input type="checkbox" id="bike" name="vehicle" value="Bike" />I have a bike</label>
                                      <label for="car"><input type="checkbox" id="car" name="vehicle" value="Car" />I have a car</label>
                            </form>
                  </body>
                  </html>
                  
                  

                   

                  I hope this is useful,

                  Ben