jquery mobile checkbox display issue

Question

Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.

The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.

Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:

Source which has error:

<!DOCTYPE HTML> 
<html>
    <head>
        <title>Mobile App Login</title> 
        <meta name=viewport content="user-scalable=no,width=device-width">
        <link rel="stylesheet" href="../jQuery/jquery.mobile.css">
        <script src="../jQuery/jquery.js"></script>
        <script src="../jQuery/jquery.mobile.js"></script>
    </head>
    <body>
        <div data-role=page id=home>

            <div data-role=header>
                <h1>Login Screen</h1> 
            </div>

            <div data-role=content>
                <label>
                    <input type="checkbox" name="checkbox-0" /> 
                    I agree 
                </label>
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1">I agree</label>
            </div>
        </div>
    </body>
</html>

Source which does not have error:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Mobile App Login</title>
        <meta name=viewport content="user-scalable=no,width=device-width" />
        <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
        <script src="../jQuery/jquery.js"></script>     
        <script src="../jQuery/jquery.mobile.js"></script>
    </head>
    <body>
        <div data-role=page id=home>

            <div data-role=header>
                <h1>Login Screen</h1>
            </div>

            <div data-role=content>
                <label>
                    <input type="checkbox" name="checkbox-0" /> 
                    I agree 
                </label>
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1">I agree</label>
            </div>
        </div>
    </body>
</html>

Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.

Without the box, the user may think it is just a label

Since I am new, I am unable to give an image, I'm sorry...

Thanks all.

Are you sure your reference to the local CSS file is looking at the right location? — Marcus
– Marcus, Commented Sep 27, 2012 at 16:38
Did you also download the images folder? Aside from that the code you pasted isn't formatted correctly making it very difficult to read, I suggest you edit your question and fix it. — Jack
– Jack, Commented Sep 27, 2012 at 18:57
I formatted your code (manually x___x...) Please, next time, make sure that you format your code correctly... — Littm
– Littm, Commented Oct 4, 2012 at 6:04
Thanks for your suggestions. it was indeed the images folder issue. I was new and was not sure how to do formatting. I will take care of it from now.. Sorry for answering so late.. i got it fixed immediately with a help of a freind. And for some reasons, i am not getting the mails when my question is answered... — user1703858
– user1703858, Commented Jun 15, 2013 at 4:32

Jonas · Accepted Answer · 2013-02-24 11:17:21Z

1

Adding checkbox inside fieldset for me solved the same problem.

<fieldset data-role="controlgroup">
  <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
  <label for="checkbox-2">I agree</label>
</fieldset>

answered Feb 24, 2013 at 11:17

Jonas

5,2198 gold badges52 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery mobile checkbox display issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related