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: 1806
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 9190 times

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

Styled checkboxes
chrome_2018-10-14_11-50-31.png
chrome_2018-10-14_11-50-31.png (19.85 KiB) Viewed 9190 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 />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Moh Youba
Veteran Member
Posts: 228
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 9004 times

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1806
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 />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Moh Youba
Veteran Member
Posts: 228
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: 1806
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 />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
zibrahim
Veteran Member
Posts: 137
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 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1806
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 />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

skoch
Veteran Member
Posts: 49
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 6108 times

skoch
Veteran Member
Posts: 49
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 5959 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 5959 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: 1806
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 />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

skoch
Veteran Member
Posts: 49
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: 1806
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 />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

skoch
Veteran Member
Posts: 49
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: 57
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 5558 times

hgarbe
Veteran Member
Posts: 57
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