Skip to main content

I have an image on static resource and I am trying to bring that checkbox on the skuid page.

here is the css I am using to bring the checkbox. Please help.

.nx-editor input[type=checkbox] {   
    box-shadow: 0 0 0;
    font-family: Gotham A;
    width: 30px;
    height: 30px;
    margin: 0px 5px 0 0;
    vertical-align: middle;
    background: url(‘resource/bgCheckbox’) left top no-repeat;
    background-size: 30px auto;
    cursor: pointer;
    left: -20px !important;
}

Thanks,
Pavi

Pavi~

The CSS you used above does not match the set of classes that Skuid uses. The best route is to inspect the elements in your browser tools and add or modify the CSS descriptors in the page.  Then take these modifications and add them to a custom CSS resource either in your page or in your theme. 

Thanks!
Karen

The thing with checkboxes is, that they look different from browser to browser. The best way to give them a custom style is to use the html-label, style that and hide the checkbox. (You can click on labels for checkboxes, so that the boxes get triggered)


For that styling, see this: https://codepen.io/CreativeJuiz/pen/BiHzp


However, the problem is, that Skuid does not render a for the checkboxes, but a

with the class nx-checkboxlabel instead.


Add the following code a Snippet, that runs on pageload to add a for each checkbox.


$('.nx-checkboxlabel').each(function(idx, elem) {    checkbox = $(this).prev('.nx-checkbox');

    var theId = encodeURIComponent($(this).html());

    checkbox.attr('id', theId);

    $(this).html('<label for='+ theId + '">' + decodeURIComponent(theId) + '</label>');

});

After that you can use any custom label styling you want 😉


http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons–webdesign-8…


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings