Fix for select and checkbox inputs styling with Bootstrap 5 theme

[WhereIsLucas]

All Submissions:

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Hi,

The arrow on the select input is not visible with the Bootstrap 5 theme.

This is due to the fact that Bootstrap 5 selects are now using the form-select class instead of form-control.

See below in the docs :
https://getbootstrap.com/docs/5.2/forms/select/
https://getbootstrap.com/docs/5.0/migration/

This PR fixes this.

[WhereIsLucas]

As issue #868 pointed, checkbox inputs were also incorrectly styled for Bootstrap 5. I added the fixes to my current PR for select.

[WhereIsLucas]

Hi,

Any chance this PR gets merged ?

Thanks !

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ccsliinc]

Can this be merged or does it need more work?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[WhereIsLucas]

Thanks !

[ccsliinc]

I think the bulk actions is not fixed. Let me see if I can just grab the code for that control.

[ccsliinc]

I don't remember what I did, but I changed something in this section toolbar.blade.php:490 or around.

            @if ($component->showBulkActionsDropdown())
                {{-- TODO - dropdown --}}
                <div class="mb-3 mb-md-0">
                    <div class="dropdown d-block d-md-inline">
                        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button"
                                id="{{ $component->getTableName() }}-bulkActionsDropdown" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                            @lang('Bulk Actions')
                        </button>

                        <div class="dropdown-menu dropdown-menu-right w-100"
                             aria-labelledby="{{ $component->getTableName() }}-bulkActionsDropdown">
                            @foreach($component->getBulkActions() as $action => $title)
                                <a
                                    href="#"
                                    wire:click="{{ $action }}"
                                    wire:key="bulk-action-{{ $action }}-{{ $component->getTableName() }}"
                                    class="dropdown-item"
                                >
                                    {{ $title }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif

[ccsliinc]

This allows for the bulk options to dropdown, it looks good, but does not work.