Styled checkboxes

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1050
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Styled checkboxes

Post by jsetzer » 2018-10-14 10:07

I stumbled upon https://hunzaboy.github.io/CSS-Checkbox-Library which is a css only library for styling checkboxes.
Using their css file and a couple of code-lines in footer-extras.php I've modified my AppGini checkboxes:

2018-10-14_12-00-00.gif
2018-10-14_12-00-00.gif (21.09 KiB) Viewed 4566 times

Default checkboxes
chrome_2018-10-14_11-49-06.png
chrome_2018-10-14_11-49-06.png (9.88 KiB) Viewed 4566 times

Styled checkboxes
chrome_2018-10-14_11-50-31.png
chrome_2018-10-14_11-50-31.png (19.85 KiB) Viewed 4566 times

Instructions
  • Create a subdirectory checkboxes under resources
  • Download their css-files from github:
    https://github.com/hunzaboy/CSS-Checkbox-Library
  • Copy checkboxes.min.css into resources\checkboxes folder
  • In footer-extras.php (or header-extras.php if you like) reference the css file with a link-tag like

    Code: Select all

    <link rel="stylesheet" href="resources/checkboxes/checkboxes.min.css">
  • In footer-extras.php create a <script> to turn the original checkboxes into new ones according to their documentation here:
    https://hunzaboy.github.io/CSS-Checkbox ... how-to-use

    Code: Select all

      $j('input[type="checkbox"]').each(function() {
        var input = $j(this),fg = input.closest('.form-group'), right = fg.children('.col-lg-offset-3');
        var container = input.closest('div.checkbox'), oldlabel = container.find('label');
        input.prependTo(right); oldlabel.prependTo(fg).append(' ').addClass('control-label').addClass('col-lg-3').append(container.find('i.glyphicon'));
        container.find('.help-block').prependTo(right); container.remove();
        var newlabel = $j('<label />').attr('value', 0).attr('for', input.attr('id')).css('font-size', '1em');
        right.removeClass('col-lg-offset-3').addClass('ckbx-style-8 ckbx-large').append(newlabel);
      })

Have a nice day!

Regards,
Jan

PS: See also: https://forums.appgini.com/phpbb/viewto ... 8550#p8550
Kind regards,
<js />

Moh Youba
Veteran Member
Posts: 157
Joined: 2017-03-12 09:31

Re: Styled checkboxes

Post by Moh Youba » 2018-11-01 11:41

Hello

Thank you for sharing. Can this works with others checkbox fields like the one on the attached screenshot
Attachments
Screen Shot 2018-11-01 at 11.39.44 AM.png
Screen Shot 2018-11-01 at 11.39.44 AM.png (26.74 KiB) Viewed 4380 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1050
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2018-11-01 16:26

Moh Youba wrote:
2018-11-01 11:41
... Can this works with others checkbox fields like the one on the attached screenshot
Should work.

Please post your testing results to help others, thank you.

Regards,
Jan
Kind regards,
<js />

Moh Youba
Veteran Member
Posts: 157
Joined: 2017-03-12 09:31

Re: Styled checkboxes

Post by Moh Youba » 2018-11-02 07:17

thank you. I am going to test and to you for update...

bescott53

Re: Styled checkboxes

Post by bescott53 » 2018-12-14 14:22

Used this today and it works perfect, went for style 15. thank you jsetzer!

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1050
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2018-12-14 14:49

Good to hear, @bescott53, thanks for testing and posting your results.
thank you jsetzer!
You are welcome!

Best regards,
Jan
Kind regards,
<js />

User avatar
zibrahim
Veteran Member
Posts: 75
Joined: 2020-01-28 18:30
Location: Malaysia

Re: Styled checkboxes

Post by zibrahim » 2020-08-08 07:44

Hi Jan,
Not sure if this code is still valid as I am not getting the expected result with your latest helper version.
I did what you have told and not getting the result.
Any help is appreciated. Thank you and have a nice day.

Zala.
Zala.
Appgini 5.94, MacOS 11.2 Windows 10 on Parallels.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1050
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2020-08-08 10:15

Hi Zala,

the tip posted in this general "Tips And Tricks" forum in 2018 is not related with AppGini Helper Javascript Library.

If the script in combination with the stylesheet does not work in current AppGini version, maybe you or another community member can find the time to improve the script or find a different stylesheet.

Regards,
Jan
Kind regards,
<js />

skoch
Posts: 25
Joined: 2020-01-27 14:20

Re: Styled checkboxes

Post by skoch » 2021-03-18 17:44

Hi Jan,

I use the checkboxes very often, that's really a great tip :D
However, if I fill in the description field in AppGini with a checkbox field, the function of the checkbox is retained, but the switch does not move!
Any idea?

Regards
Stefan
checkbox_descr.PNG
checkbox_descr.PNG (2.79 KiB) Viewed 1484 times

skoch
Posts: 25
Joined: 2020-01-27 14:20

Re: Styled checkboxes

Post by skoch » 2021-03-24 11:11

Hi,

have now found the reason for the behavior with the inspector console. The span area with the description is between the input field and the label:
checkbox_descr_01.JPG
checkbox_descr_01.JPG (22.69 KiB) Viewed 1335 times

If you move this line in the console over the input line, the checkbox animation works again:
checkbox_descr_02.JPG
checkbox_descr_02.JPG (23.71 KiB) Viewed 1335 times
The corresponding HTML code is in the file /templates/tablename_templateDV.html.

Is there a possibility to store this conversion centrally?

Regards
Stefan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1050
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2021-03-24 11:27

Not sure if this works. I do not find the time to setting up a test-project and creating a table according to your scenario. Give it a try!

Code: Select all

<!-- not tested -->
<!-- file: hooks/header-extras.php -->
<script>
    jQuery(document).ready(function() {
        jQuery(".ckbx-medium > .help-block").each(function(i, e) {
            jQuery(e).prependTo(jQuery(e).parent());
        });
    });
</script>
Kind regards,
<js />

skoch
Posts: 25
Joined: 2020-01-27 14:20

Re: Styled checkboxes

Post by skoch » 2021-03-24 11:33

Hi Jan,

super quick answer and super solution - works wonderfully :D
You're my superhero :lol

Regards
Stefan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1050
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Styled checkboxes

Post by jsetzer » 2021-03-24 11:37

:D Thanks!

Caution: Whenever you change the size (not the style, but the size) of your checkboxes, you will have to adjust the jQuery selector (which is .ckbx-medium) right now.
Kind regards,
<js />

skoch
Posts: 25
Joined: 2020-01-27 14:20

Re: Styled checkboxes

Post by skoch » 2021-03-24 12:48

... I'll take note of that - thanks again for the script ;)

Kind Regards
Stefan

hgarbe
Veteran Member
Posts: 47
Joined: 2020-01-21 17:35

Re: Styled checkboxes

Post by hgarbe » 2021-04-28 00:20

Hello to everyone writing in this thread,

I stumbled upon it and liked the styled checkboxes. Tested it with a newly created Project and didn't worked. Not surprisingly according to one of the previous post metioned it.

Stefan which AG Version are you using? Have you done any adjustment to the Code from 2018?

In Firefoxs Debugger there is one execption as seen in the Screenshot. Might this be causing it? A Syntax error? According to the Debugger in Line 1224 which I highlighted ...
Attachments
2021-04-28 02_11_24-Styled Checkboxes _ Styled boxes.png
2021-04-28 02_11_24-Styled Checkboxes _ Styled boxes.png (22.93 KiB) Viewed 934 times

hgarbe
Veteran Member
Posts: 47
Joined: 2020-01-21 17:35

Re: Styled checkboxes

Post by hgarbe » 2021-04-28 00:44

Found an older Version of the CSS here:
https://github.com/hunzaboy/CSS-Checkbo ... es.min.css
With this outdate Version no Error in the Debugger and it works as expected.

Post Reply