Got something cool to share with AppGini users? Feel free to post it here!
-
jsetzer
- AppGini Super Hero
- Posts: 1817
- Joined: 2018-07-06 06:03
- Location: Kiel, Germany
-
Contact:
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 (21.09 KiB) Viewed 9448 times
Default checkboxes
- chrome_2018-10-14_11-49-06.png (9.88 KiB) Viewed 9448 times
Styled checkboxes
- chrome_2018-10-14_11-50-31.png (19.85 KiB) Viewed 9448 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: 229
- Joined: 2017-03-12 09:31
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 (26.74 KiB) Viewed 9262 times
-
jsetzer
- AppGini Super Hero
- Posts: 1817
- Joined: 2018-07-06 06:03
- Location: Kiel, Germany
-
Contact:
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: 229
- Joined: 2017-03-12 09:31
Post
by Moh Youba » 2018-11-02 07:17
thank you. I am going to test and to you for update...
-
bescott53
Post
by bescott53 » 2018-12-14 14:22
Used this today and it works perfect, went for style 15. thank you jsetzer!
-
jsetzer
- AppGini Super Hero
- Posts: 1817
- Joined: 2018-07-06 06:03
- Location: Kiel, Germany
-
Contact:
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
-
zibrahim
- Veteran Member
- Posts: 137
- Joined: 2020-01-28 18:30
- Location: Malaysia
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.
-
jsetzer
- AppGini Super Hero
- Posts: 1817
- Joined: 2018-07-06 06:03
- Location: Kiel, Germany
-
Contact:
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
Post
by skoch » 2021-03-18 17:44
Hi Jan,
I use the checkboxes very often, that's really a great tip
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 (2.79 KiB) Viewed 6366 times
-
skoch
- Veteran Member
- Posts: 49
- Joined: 2020-01-27 14:20
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 (22.69 KiB) Viewed 6217 times
If you move this line in the console over the input line, the checkbox animation works again:
- checkbox_descr_02.JPG (23.71 KiB) Viewed 6217 times
The corresponding HTML code is in the file /templates/tablename_templateDV.html.
Is there a possibility to store this conversion centrally?
Regards
Stefan
-
jsetzer
- AppGini Super Hero
- Posts: 1817
- Joined: 2018-07-06 06:03
- Location: Kiel, Germany
-
Contact:
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
Post
by skoch » 2021-03-24 11:33
Hi Jan,
super quick answer and super solution - works wonderfully
You're my superhero :lol
Regards
Stefan
-
jsetzer
- AppGini Super Hero
- Posts: 1817
- Joined: 2018-07-06 06:03
- Location: Kiel, Germany
-
Contact:
Post
by jsetzer » 2021-03-24 11:37
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
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
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 (22.93 KiB) Viewed 5816 times