This topic contains 12 replies, has 3 voices, and was last updated by Sean Sean 3 months, 1 week ago.

Checkbox not displaying


  • codizzler
    Participant

    Posts: 4
    Member Reply #2492

    I have a grid of checkbox elements that get wrapped in a div with class “checker”. This “checker” class prevents the checkboxes from being displayed. Is there anyway to keep from having the checker div being generated around the checkboxes so that they will be displayed properly?

    Sean
    Sean
    Keymaster

    Posts: 3536
    Support Staff Reply #2506

    Hi,

    Did you not copy the code from browser’s code inspector ? By right those extra divs and spans are used to customize default checkboxes to provide better look & feel. Please refer to the demos from the original theme and try to use the code directly from the template source(HTML files).

    Thanks.


    codizzler
    Participant

    Posts: 4
    Member Reply #2509


    <div id="uniform-checkedB" class="checker">
    <span>
    <input class="letterCheck" name="checked[]" id="checkedB" value="B" type="checkbox">
    </span>
    </div>

    Here is a copy of the code from the code inspector. Using debugging tools, if I remove the “checker” class the checkboxes appear appropriately. I have also included a screen shot of the the invisible checkbox for your reference.

    There is a checkbox to the left of each letter, once they are wrapped in the “checker” class it renders them invisible. Currently I am using a jQuery hack, $(“div”).removeClass(“checker”);, to prevent this class from messing up my app. Even using the “icheck” instead gives the same problem.

    • This reply was modified 1 year, 11 months ago by  codizzler.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 3536
    Support Staff Reply #2520

    Hi,

    Can you please provide a test link to your developing page ? By right these customized checkboxes should be working properly if you don’t have any JS error.

    If you want to disable the styled checkboxes and use standard ones just apply “toggle” class to all checkboxes under your datatable:

    <input type=”checkbox” class=”toggle”>

    Thanks.


    codizzler
    Participant

    Posts: 4
    Member Reply #2566

    I found my issue. The project I am working on uses a small portion of the features available with these templates, therefore I am including only the subset of resource files I am using. I was not properly including the image file containing the “checker” style checkboxes and therefore they were not rendering.

    I apologize that I did not notice this sooner. I appreciate the great work and support put forth for this product!

    Sean
    Sean
    Keymaster

    Posts: 3536
    Support Staff Reply #2569

    Hi :),

    Never mind. Glad to hear you managed to fix the issue. Good luck with your project!

    Thanks.


    Miril
    Participant

    Posts: 8
    Member Reply #9741

    I’m using Metronics on a laravel project.
    I’m having issues showing checkbox via JQUERY.
    When I use checkbox on my blade view such as :

    @foreach($accommodationSupplements as $accommodationSupplement)

    <div id = “accommodationSupplementId” class=”col-md-12 row-bordered supplementCheck”>
    <span class=”col-md-1 form-group”>
    <input type=”checkbox” name=”accommodationSupplement[]” value=    {{$accommodationSupplement->id}}”>
    </span>
    <span class=”col-md-4 form-group”>
    <dt class=”font-blue-steel”>{{$accommodationSupplement->name}}</dt>
    </span>
    </div>
    @endforeach

    When I append the html code via jquery after a successful ajax response such as :
    <div id = “accommodationSupplementId” class=”col-md-12 row-bordered supplementCheck”>
    <span class=”col-md-1 form-group”>
    <input type=”checkbox” name=”accommodationSupplement[]” value=” ‘+response.id+’ “>
    </span>
    <span class=”col-md-4 form-group”>
    <dt class=”font-blue-steel”>’+response.name+'</dt>
    </span>
    </div>

    Checkbox doesn’t look the same, and has not extra – hidden classes such as checked, checked over and extra span. Any IDEA How to make it looks the same via append jquery?
    Thanks!

    • This reply was modified 3 months, 2 weeks ago by  Miril.
    Sean
    Sean
    Keymaster

    Posts: 3536
    Support Staff Reply #9755

    Hi,

    You will need to use the custom checkbox makrup in order to get custom checkbox look and feel. Please refer to this tempalte http://keenthemes.com/preview/metronic/theme/admin_1/form_controls.html and the custom checkbox and radio markup:

    <div class=”mt-checkbox-inline”>

    <label class=”mt-checkbox”>

    <input type=”checkbox” id=”checkbox_id” value=”option1″> Checkbox 1

    <span></span>

    </label>

    </div>

    Thanks.


    Miril
    Participant

    Posts: 8
    Member Reply #9776

    Still not working..
    Please check the screenshot. Checkbox close to Camera 2 or Camera 3 should look like Other checkbox group below, e.g: Copil 10-15 ani.
    Please note that the html is appended via JQUERY and result is populated by ajax response. Check the other code screenshot.

    • This reply was modified 3 months, 1 week ago by  Miril.
    Attachments:
    You must be logged in to view attached files.

    Miril
    Participant

    Posts: 8
    Member Reply #9780

    EDIT: Don’t worry about typo “mt-checkbox-inline” before class, fixed it and result is the same.
    Result is appended triggering the calendar icon, on changing calendar.

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 3536
    Support Staff Reply #9798

    Hi,

    Please double check the code we provided as your generated code’s output will not be same with the original required code. For example “span” tag is missing.

    Thanks.


    Miril
    Participant

    Posts: 8
    Member Reply #9815

    Hi Sean!
    Thank you for your reply. Used exactly your code and still is not working. Please see both attached pictures.
    You will se that checkboxes “Checkbox 1″ are way different than other checkboxes below them, and as I said, I want to show in the way that checkboxes bellow are.
    Thank you!

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 3536
    Support Staff Reply #9826

    Hi,

    Sorry, i have no idea what can be issue here. Please double check your code and make sure the generated checkbox HTML by your JS code 100% matches the expected code.

    You can also verify your code output by simply placing it in place HTML without generating via your JS code. Also please verify the actual output and make sure the final generated HTML code matches the expected markup.

    Thanks.

You must be logged in to reply to this topic.