checkboxes and bootstrap3

[Jimmi08]

Hi, I am fixing frontend checkboxes...

List of existing checkboxes on frontend:

• usersettings page
• login page
• login menu
• theme shortcodes modal login
• signing plugin - replacement for {BOOTSTRAP_USERNAV}
• contact page - send me copy
• gdpr checkbox on contact page

How it should works:

• only e107::getForm()->checkbox() should be used in shortcodes, no hardcoded HTML code
• output of this can be set in the theme in the checkbox snippet. As soon as you add/change this snippet, all your checkboxes on frontend will look the same and unique for your theme. Without theme default (original) code from form handler is used.

I run to a problem I need to discuss with the bootstrap3 theme.
With changing shortcodes I need to be sure that the final result is not changed.

There are options:

1. not use checkbox snippet for bootstrap3 at all. - it fails on rememberme button (checkbox in form)
   • it influences almost each theme

2. add snippet according boostrap specs This one:

<div class="checkbox"><label>
<input id='{id}' class='{class}' type='checkbox' {attributes} />
{label}</label></div>

• usersettings have already div class and gdpr have already those classes, so there is wrong markup (according to gdpr there is already an issue)

3. add stripped snippet , just input field

<label>
<input id='{id}' class='{class}' type='checkbox' {attributes} />
{label}</label>

For bootstrap3 it is correct, but it will cause problem later

My opinion is to fix everything the correct way and let theme authors fix possible issues. So it means to fix usersettings and gdpr too.

For your imagination, these are examples for other bootstrap versions: Bt4

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="{id}" {attributes} >
    <label class="form-check-label" for="{id}">
        {label}
    </label>
  </div>

MDB4: (custom bootstrap4)

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="{id}" {attributes}>
    <label class="custom-control-label" for="{id}">{label}</label>
</div>

MDB5 (standard)

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="{id}" {attributes}>
    <label class="form-check-label" for="{id}">{label}</label>
</div>

PS. form-group element is part of template/wrapper.

Any ideas?

[Jimmi08]

Fixed with this: https://github.com/e107inc/e107/commit/8871cdd097e4eef56008925e8ff847a6c79873ec

Recapitulation:

• bootstrap3 core template will not use snippets
• login menu shortcodes will not be fixed, so old markup will be used then. No changes in existing themes.
• bootstrap usernav shortcode was already replaced with signin plugin. Only its shortcodes are (will be) updated.
• login menu (as menu) will be added to signin plugin and login_menu plugin will be fully replaced and removed.
• usersettings shortcodes userclass was fixed for new themes (with theme.html). Bootstrap3 theme will be fixed (returned to old code) with adding usersettings template and adding wrapper for userclass shortcode. The result was that checkboxes are moved a bit to left side, nothing more.