Tuesday 29 January 2013

DotNetNuke 7 styles checkboxes and radiobuttons

Found one interesting thing: DNN 7 styles all checkboxes at the form after page loads .

This happens at the dnn.jquery.js script (/* DNN customized checkbox/radiobox */). It makes changes for all checkboxes and radiobuttons: controls are hidden, but instead it shows styled span.

 It looks beauty and great, but sometimes i need simple HTML checkboxes, like this . Had to digg a lot, but have not found where is a problem. So had to check myself and found easy fix. All you need to show simple checkbox or radiobox, just add class="normalCheckBox" or "normalRadioButton" and your controls will be standard.

Enjoy :)

8 comments:

  1. This worked awesome! I upgraded from DNN 6 to DNN 7 and many of my controls were no longer displaying any radiobuttons, just a list. Added the class and voila! worked as expected.

    ReplyDelete
  2. I also thank you. I've spent some time on this and not being a fully fledged web developer, really had no idea how to resolve this problem. The documentation on this from DNN is as per usual terrible. Only problem now is I have to search through the code and find all the references and test everyone to ensure it's all back to normal. The upgrade to DNN 7 has had a lot of little skin issues. I'd rather they made all the changes in the applied skins rather than in the default and using Javascript to make even more changes that aren't easily seen.

    Rant over! Thanks for your help.

    ReplyDelete
  3. Nolan

    Np, you are welcome :)

    Sergey

    ReplyDelete
  4. was going bonkers trying to get my jquery ui custom radio button set to work. Everywhere gave these crazy complex answers. I truly appreciate the simplicity and elegance of your solution. Thanks!

    ReplyDelete
  5. Any idea if this has changed again in DNN7.3?
    My normalCheckBox does no longer behave as normal in my DNN-module, however it is fine in a jsfiddle...

    ReplyDelete
  6. At clear DNN installation 7.3.4 it works fine. Can you double check your file Resources\Shared\scripts\dnn.jquery.js is the correct one (you can compare with file from installation).

    ReplyDelete

Note: only a member of this blog may post a comment.