Align checkbox with text label on form
RespondidaHi There,
I was wondering if anyone might know the JS or CSS on how to align a checkbox label with the actual checkbox so it takes up less room on the form? It looks ugly with the checkbox below the title.
I was playing around with the CSS and managed to get it like this - But I really would like the checkbox to the left.
Anyone might have some quick code they could share to achieve this at all?
Thanks in advance :)
Best,
Amie
-
Hi Amie,
You need CSS to change the alignment, and JS to move the label to after the checkbox. These are the steps that I performed:
1. Get the custom field ID by navigating to Agent Admin > Settings> Ticket Fields, then selecting the field. The custom field ID appears under the field name. So the custom field ID from the image below is 22222222
2. Edit your theme's style.css to add the following CSS, changing the field ID to your custom field ID:
.request_custom_fields_22222222 {
display: flex;
align-items: center;
}#request_custom_fields_22222222_label {
padding-right: .5rem;
}#request_custom_fields_22222222_hint {
padding-left: .5rem;
}[I included the CSS in case anybody else is looking at this, and needs the CSS.] If the custom field doesn't have a description, you don't need the CSS for #request_custom_fields_22222222_hint. You also may find that you don't need to add any CSS for the padding. I used .5rem for the padding, as we use rem units in our theme; you may need to adjust it to px and pick whatever number suits you.
3. Edit your theme's script.js to add the following inside the document.ready function, to move the checkbox label to after the checkbox:
$('#request_custom_fields_22222222_label').insertAfter('#request_custom_fields_22222222');
After I made these changes, the checkbox, label, and description appeared as shown below:
Por favor, entrar para comentar.
1 Comentários