Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated checkboxes and radios to match bootstrap 5 #6633

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

Nickno95
Copy link

@Nickno95 Nickno95 commented Feb 7, 2023

🤔Type of Request

  • Bug fix
  • New feature
  • Improvement
  • Documentation
  • Other

🔗Resolves an issue?
N/A

📝Changelog

Updated checkboxes and radios to match Bootstrap 5 styling (see https://getbootstrap.com/docs/5.3/forms/checks-radios/).
This allows for other features like the color of the checkboxes/radios to match the bootstrap primary color when customized

  • Core
  • Extensions

💡Example(s)?
Before: https://live.bootstrap-table.com/code/Nickno95/14139
After: https://live.bootstrap-table.com/code/Nickno95/14140

☑️Self Check before Merge

⚠️ Please check all items below before reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Changelog is provided or not needed

Copy link
Collaborator

@UtechtDustin UtechtDustin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR would add the class form-check-input for every theme e.g. semanticui.
Please adjust it, so the class will only be used for BT5.

@Nickno95
Copy link
Author

This PR would add the class form-check-input for every theme e.g. semanticui.

Please adjust it, so the class will only be used for BT5.

Any suggestion on best way for checking what the theme is set to in the javascript, maybe an example in the code that's already doing this?
Another part of the issue in Bootstrap 5 is with needing an extra wrapping element that was not needed in Bootstrap 4, and I assume other frameworks don't need that either.

@UtechtDustin
Copy link
Collaborator

UtechtDustin commented Feb 28, 2023

We already do that quite often, a few hints:

const CONSTANTS = {
3: {
classes: {
buttonsPrefix: 'btn',
buttons: 'default',
buttonsGroup: 'btn-group',
buttonsDropdown: 'btn-group',
pull: 'pull',
inputGroup: 'input-group',
inputPrefix: 'input-',
input: 'form-control',
select: 'form-control',
paginationDropdown: 'btn-group dropdown',
dropup: 'dropup',
dropdownActive: 'active',
paginationActive: 'active',
buttonActive: 'active'
},
html: {
toolbarDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
toolbarDropdownItem: '<li class="dropdown-item-marker" role="menuitem"><label>%s</label></li>',
toolbarDropdownSeparator: '<li class="divider"></li>',
pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>',
dropdownCaret: '<span class="caret"></span>',
pagination: ['<ul class="pagination%s">', '</ul>'],
paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
icon: '<i class="%s %s"></i>',
inputGroup: '<div class="input-group">%s<span class="input-group-btn">%s</span></div>',
searchInput: '<input class="%s%s" type="text" placeholder="%s">',
searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
}
},
4: {
classes: {
buttonsPrefix: 'btn',
buttons: 'secondary',
buttonsGroup: 'btn-group',
buttonsDropdown: 'btn-group',
pull: 'float',
inputGroup: 'btn-group',
inputPrefix: 'form-control-',
input: 'form-control',
select: 'form-control',
paginationDropdown: 'btn-group dropdown',
dropup: 'dropup',
dropdownActive: 'active',
paginationActive: 'active',
buttonActive: 'active'
},
html: {
toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
pageDropdown: ['<div class="dropdown-menu">', '</div>'],
pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
dropdownCaret: '<span class="caret"></span>',
pagination: ['<ul class="pagination%s">', '</ul>'],
paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
icon: '<i class="%s %s"></i>',
inputGroup: '<div class="input-group">%s<div class="input-group-append">%s</div></div>',
searchInput: '<input class="%s%s" type="text" placeholder="%s">',
searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
}
},
5: {
classes: {
buttonsPrefix: 'btn',
buttons: 'secondary',
buttonsGroup: 'btn-group',
buttonsDropdown: 'btn-group',
pull: 'float',
inputGroup: 'btn-group',
inputPrefix: 'form-control-',
input: 'form-control',
select: 'form-select',
paginationDropdown: 'btn-group dropdown',
dropup: 'dropup',
dropdownActive: 'active',
paginationActive: 'active',
buttonActive: 'active'
},
html: {
dataToggle: 'data-bs-toggle',
toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
pageDropdown: ['<div class="dropdown-menu">', '</div>'],
pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
dropdownCaret: '<span class="caret"></span>',
pagination: ['<ul class="pagination%s">', '</ul>'],
paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
icon: '<i class="%s %s"></i>',
inputGroup: '<div class="input-group">%s%s</div>',
searchInput: '<input class="%s%s" type="text" placeholder="%s">',
searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
}
}
}[bootstrapVersion]

https://github.com/wenzhixin/bootstrap-table/blob/develop/src/themes/foundation/bootstrap-table-foundation.js#L21-L37
pageNumber.push(Utils.sprintf(this.constants.html.pageDropdownItem, active, page))

@wenzhixin wenzhixin self-assigned this Apr 5, 2023
@wenzhixin wenzhixin self-requested a review April 5, 2023 04:20
@marceloverdijk
Copy link
Contributor

Actually I noticed this my self today using the Columns toolbar dropdown.
The checkboxes generated in the dropdown to toggle the column visibility are generated like:

<label class="dropdown-item dropdown-item-marker">
    <input type="checkbox" data-field="name" value="0" checked="checked">
    <span>Name</span>
</label>

and indeed does not use the BS theme (if using BS).

It would be great to have a way to have it generated as:

<label class="dropdown-item dropdown-item-marker">
    <input class="form-check-input" type="checkbox" data-field="name" value="0" checked="checked">
    <span>Name</span>
</label>

@UtechtDustin are you working on this yourself?

@marceloverdijk
Copy link
Contributor

Just for reference if someone wants a quick but hack'ish solution.

$.BootstrapTable = class extends $.BootstrapTable {

  initToolbar() {
    super.initToolbar()
    $(`${this.options.buttonsToolbar} input[type='checkbox']`).addClass('form-check-input me-2')
  }
}

@UtechtDustin
Copy link
Collaborator

@marceloverdijk No, i'm not working on this issue right now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants