Hi all
I thought this might have been answered previously but can’t find the solution if it has and attempts with AI have been unsuccessful.
How do you reposition the checkbox from below the label to be to the left of it?
Regards
Dean
Hi all
I thought this might have been answered previously but can’t find the solution if it has and attempts with AI have been unsuccessful.
How do you reposition the checkbox from below the label to be to the left of it?
Regards
Dean
Hi @Dean2
This should do it:
All checkboxes in the view:
#view_123 .kn-label,
#view_123 .kn-checkbox {
display: inline-block;
}
For a specific field:
#kn-input-field_123 .kn-label,
#kn-input-field_123 .kn-checkbox {
display: inline-block;
}
You may need to add margin to the checkbox so the label doesn’t but up to the checkbox
#kn-input-field_123 .kn-checkbox {
margin-right: 15px;
}
Hope this helps
Craig
Hi Craig
Thank you for that suggestion.
I pasted it into the Javascript and got the red warning on the # so then tried it in the CSS but it didn’t work.
Regards
Dean
Hi Dean
Sorry should have been more specific. This is css.
Just to confirm you replaced your view or field id?
Hi Craig
Yes, I did.
That said some weird things were going on this morning with our Javascript & we lost KTL which we eventually got back working. Maybe I’ll try again later.
Regards
Dean
Hi
The only code that I got to move the checkbox was the following but it moves the checkbox to the right of the label and still on the line below.
#view_1815 label.option.checkbox {
display: flex;
flex-direction: row-reverse; /* Moves checkbox before text /
align-items: center;
gap: 6px; / Adjust spacing between checkbox and text */
}
Regards
Dean
Hi Dean
Can you show me what you are trying to do. I might be misunderstanding what you are trying to do. As default knack have the check boxes like this:
Craig
Hi Craig
Sorry, I should have been clearer. I’m wanting to prepend the checkbox to the label to use the screen space more efficiently, as this form will be used on a tablet or smart phone.
Regards
Dean
Hi
I’m making some progress albeit very slowly. The reason for the lack of progress with AI is that we’ve finally determined that there is a conflict somewhere in my Javascript, and I now need to debug it. For reference this is the code supplied that prepended the checkbox for just 1 field.
$(document).on(‘knack-page-render knack-view-render.view_1815’, function(event, view) {
function moveCheckbox() {
// Get the container
const container = $(‘#kn-input-field_1967’);
if (container.length) {
console.log('Found container');
// Get the elements we need
const mainLabel = container.find('label.kn-label');
const checkbox = container.find('input[type="checkbox"]');
const emptyLabel = container.find('label.option.checkbox');
const span = mainLabel.find('span');
if (checkbox.length && mainLabel.length) {
// Remove checkbox and empty label from current location
checkbox.detach();
emptyLabel.detach();
// Move empty label first, then checkbox, before span
mainLabel.prepend(emptyLabel);
emptyLabel.after(checkbox);
console.log('Checkbox repositioned');
}
}
}
// Try immediately
moveCheckbox();
// Also try after a short delay
setTimeout(moveCheckbox, 250);
});
Dean
Apologies for a potentially silly question here @Dean2 - your form appears to have checkbox fields with blank checkbox text set for each field? You could easily set each field with the text your need in the tables, then on the page have a blank label and then no code is required?