admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(configurator): preserve boolean_toggle slider styling (PO Pending fix)

Browse Source 
My .o_fp_xpr_cell rule set width/height: 18px on every input[type=
checkbox], which broke Bootstrap's .form-switch slider proportions
(switches need width: 2em / height: 1em). Result: PO Pending and
other boolean_toggle widgets rendered as a single grey circle with
no visible track.

Excluded .o_field_boolean_toggle from the checkbox override and added
explicit Bootstrap form-switch styling — width: 2em, height: 1.2em,
accent colour on checked state, accent-bg focus ring. Non-switch
checkboxes (Blanket SO, Block partial shipments etc.) keep the 18px
square treatment.
This commit is contained in:
gsinghpal
2026-05-27 00:29:46 -04:00
parent 18072c9c60
commit 2b8d99f69d
1 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
fusion_plating/fusion_plating_configurator/static/src/scss/express_order.scss
View File

@@ -94,9 +94,12 @@
}
.o_field_widget select { cursor: pointer; }
// Native checkboxes inside Express cells — keep them visible at
// a comfortable size. Boolean toggle widget retains its own look.
.o_field_widget input[type="checkbox"] {
// Native (non-switch) checkboxes inside Express cells — keep
// them visible at a comfortable size. EXCLUDES the boolean_toggle
// widget (.o_field_boolean_toggle) which uses Bootstrap's
// .form-switch slider styling that breaks if we set a fixed
// width on the input.
.o_field_widget:not(.o_field_boolean_toggle) input[type="checkbox"] {
width: 18px;
height: 18px;
min-height: 18px;
@@ -105,9 +108,35 @@
accent-color: $xpr-accent;
}
// Ensure Boolean/toggle aligns visually with the underline
.o_field_boolean,
// Boolean toggle widget — preserve Bootstrap's slider proportions
// (2em × 1em). Just centre vertically with the row height.
.o_field_boolean_toggle {
padding: 5px 0;
min-height: 30px;
display: inline-flex;
align-items: center;
// Bootstrap form-switch styling — accent the slider
.form-check-input {
width: 2em !important;
height: 1.2em !important;
min-height: 1.2em !important;
cursor: pointer;
margin: 0;
&:checked {
background-color: $xpr-accent;
border-color: $xpr-accent;
}
&:focus {
box-shadow: 0 0 0 0.15rem $xpr-accent-bg;
border-color: $xpr-accent;
}
}
}
// Non-switch Boolean
.o_field_boolean:not(.o_field_boolean_toggle) {
padding: 5px 0;
min-height: 30px;
display: flex;