Checkbox rendering twice, error when wrapped in label



  • Hi all,

    I am trying to put 6 checkboxes in just as block items, when I put a ons checkbox followed by a label the checkbox renders once in the label and once below it, when I try to wrap the checkbox in an additional label I get an ‘Uncaught typeerror: cannot read property addEvent of null’ in components.js, which I did not write. Can anyone help? Here is the code that is rendering two boxes:

     <p>Tags:</p>
                <ons-checkbox input-id="history"></ons-checkbox><label for="history">History</label>
                <ons-checkbox input-id="oddity"></ons-checkbox><label for="oddity">Oddity</label>
                <ons-checkbox input-id="geography"></ons-checkbox><label for="geography">  Geography    </label>
                <ons-checkbox input-id="sports"></ons-checkbox><label for="sports">  Sports    </label>
                <ons-checkbox input-id="entertainment"></ons-checkbox><label for="entertainment">  Entertainment    </label>
                <ons-checkbox input-id="culture"></ons-checkbox><label for="culture">  Culture    </label>
                <ons-checkbox input-id="food"></ons-checkbox><label for="food">  Food    </label>
    


  • @kelifine,

    Since you only provide a fragment, it hard to tell what you actually see and what Onsen UI JavaScript files you are referencing; May be not the latest.

    The following works fine (two ways). Compare with yours.

    <!DOCTYPE HTML>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    
        <meta http-equiv="Content-Security-Policy" content="style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';">
    
        <script src="components/loader.js"></script>
    
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    
        <script src="https://unpkg.com/onsenui/js/onsenui.js"></script> 
            
    </head>
    
    
    <body style="padding: 50px;">
    
        <div>
            <label class="left">
                <ons-checkbox input-id="check-1"></ons-checkbox>
            </label>
            <label for="check-1" class="center">
                Apple
            </label>
        </div>
        <div>
              <label class="left">
                <ons-checkbox input-id="check-2"></ons-checkbox>
              </label>
              <label for="check-2" class="center">
                Banana
              </label>
        </div>
        
        <div>
            <ons-checkbox input-id="history"></ons-checkbox><label for="history">History</label>        
        </div>
        <div>       
            <ons-checkbox input-id="oddity"></ons-checkbox><label for="oddity">Oddity</label>
        </div>
    </body>
    
    </html>
    


  • @jamal I am using what I believe is the latest Onsen (2.9.1) in the Monaca IDE, I tried wrapping them in divs like you have but I still see a checkbox with the label and another plain checkbox below the label. Here’s my scripts: it’s the components/loader.js that’s throwing an error, I didn’t make or modify that

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/styles.css">
        <script src="js/cssua.min.js"></script>
        <script src="js/app.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBI8KG5AiGW8FKD3sPfbWKvQGsFrC1bmCA&callback=initMap"
        async defer></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    </head>
    


  • @kelifine,

    I do not see the following in your header:

      
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    
        <script src="https://unpkg.com/onsenui/js/onsenui.js"></script> 
    

    Does my code in previous post work?



  • No it didn’t, and it still rendered twice when I added those scripts. I still got the same error with the uncaught type error too?



  • @kelifine,
    What is your environment? Also provide screen shots.
    Can you start from scratch?

    I am trying to help you. A concrete full sample to replicate the issue should make it easier to find the problem.



  • @jamal
    0_1518802751420_Screenshot_20180216-103545.png

    I’m using the Monaca Cloud IDE



  • @kelifine, your screen tells me you are NOT using Onsen UI. The checkbox in Onsen have a circular shape not square shaped boxes:

    0_1518851635553_image.png

    Something you are not showing in your code that is causing this issue. Unfortunately, you are providing bits and pieces! Again show a full code example that shows the problem.


Log in to reply