Align checkbox with text label on form

Respondida

1 Comentários

  • Karen D Snyder

    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:

     

    2

Por favor, entrar para comentar.

Powered by Zendesk