I want to know how to change the position of a checkbox

Answered

18 Comments

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    jihoon lee, now you'll have to do the following with the CSS.

     

    하나 ). Copy the ID of your checkbox label as I did.

     

     

     

    둘 ). Now, copy the checkbox label ID.

     

     

     셋 ). Paste it at the bottom of your style.css file with the CSS property.

     #request_custom_fields_6534872648985_label {
        display: inline-block;
      }


    Screenshot for the same:

     

    넷 ). Checkbox labels are in full width, that's why it's happening.

     

    When you set the inline-block for every checkbox, it would be inline as you want.

     

     

    Note: You have so many checkboxes so you have to do this for all labels because every checkbox label has it's own ID. As I have a single checkbox, so I have this, but you have many.

     

     

    You can write the CSS for all like this:

     

     

    헷갈리는 부분이 있으면 언제든지 질문해주세요 :)

     

    Thanks

    Team

    1
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    hey 이지훈,

    Can you share the public URL of your HC?  I can see your form and provide the exact solution.

     

    Thanks

    0
  • 이지훈(Lee jihoon)

    Hi, Ifra.

    Thanks for the comment.

    Unfortunately we can only request inquiries by logging in.

    However, this problem is reproduced in a pure Copenhagen theme. If you create a ticket form with checkboxes in it and see how it looks to customers, you're probably like me.

    0
  • 이지훈(Lee jihoon)

    Hi, Ifra.

    I made the following for you.

    https://ahnlab310.zendesk.com/hc/en-us/requests/new

     

    0
  • 이지훈(Lee jihoon)

    Ifra, you are my hero!!

    I'll apply it right away and let you know if it works.

    0
  • 이지훈(Lee jihoon)

    Hi. Ifra.

    Is it possible to move the checkbox in front of the label as in the image below?

    0
  • 이지훈(Lee jihoon)

    Thanks Ifra!

    I solved that method through JQuery at "new_request_page.hbs".

    <script>
        $( document ).ready( function() {
          $('label#request_custom_fields_6534872648985_label').before( $(request_custom_fields_6534872648985) );
        });
    </script>

     

    Thank you so much. It was of great help to me.

    And in the next step, I will find out if there is a way to apply it to all check boxes at once.

    And when something works out, I'll add a comment here.

    And if you have a more beautiful way, please leave a comment here too.

    and thanks again!!

     

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Great! You got it

     

    You can try this for all checkboxes at once:

    $(document).ready(function () {
     if($(".form-field.boolean").children('input[type="checkbox"]')) {
      $('label').before( $('input[type="checkbox"]') );
      }
    });

     

    Also you can use float:left CSS property to set the checkboxes left side.

    0
  • 이지훈(Lee jihoon)

    I tested the code you provided, but it creates unnecessary checkboxes for all labels. I think "float:left" works better, so I'll try it.

    0
  • 이지훈(Lee jihoon)

     

    And... instead of writing all the labels in CSS, I found out that if I modify the label CSS as shown below, all of them are applied.

    Of course, I'll have to see if there are any side effects to this approach.

    .form-field label {
      /***** Forms 
      display: block;
      *****/
      display: inline-block;
      font-size: 13px;
      margin-bottom: 5px;
    }
    0
  • 이지훈(Lee jihoon)

     

    I made the following using the "float: left;" you gave me. It looks ridiculous, but it works.

    .form-field input[type="checkbox"] {
    width: auto;
      float: left;
        margin-top: 0.8%;
        margin-right: 1%;
    }

    I'm not a web design expert, so this is enough for me. But, if you have more beautiful code, please let me know.

    Thank you so much.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    jihoon lee, now, you only need to change the properties % to px to fix the alignment on mobile devices. Also, need to add RTL CSS to fix on right to left direction.

     

    Current:

    .form-field input[type="checkbox"] {
    width: auto;
      float: left;
    margin-top: 0.8%;
    margin-right: 1%;
    }

    Output on mobile/small devices:- Alignment isn't fine






    Updated Code:

    .form-field input[type="checkbox"] {
    width: auto;
    float: left;
    margin-top: 6px;
    margin-right: 10px;
    }


    [dir="rtl"] .form-field input[type="checkbox"] {
        float: right;
        margin-top: 6px;
        margin-right: 0;
        margin-left: 10px;
    }

    Output on mobile/small devices:-





    For RTL (Right To Left) direction:



    0
  • 이지훈(Lee jihoon)

    Hi Ifra.

    I didn't even think about mobile UX. your code is so pretty

    I will apply this to a real domain theme tomorrow.

    thanks.

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    :)

    0
  • Kyna (Coins.ph Team)

    Hi Ifra Saqlain I need some help as I have very limited knowledge on code.
    How will I align my checkbox like the above scenario.

    This is our current code on the new request page.



    <div class="container-divider"></div>
    <section class="top_header">
       <div class="container">
          <nav class="sub-nav">
             {{breadcrumbs}}
             {{search submit=false instant=true}}
          </nav>
       </div>
    </section>
    <div class="container">
       <h1 class="new-request-title">
          {{t 'submit_a_request'}}
          {{#if follow_up}}
          <span class="follow-up-hint">
          {{follow_up}}
            
          </span>
          {{/if}}
       </h1>
       <div class="form">
          {{request_form}}
       </div>
       {{chat}}
    </div>

    0
  • Kyna (Coins.ph Team)

    Here is our request page
    https://support.coins.ph/hc/en-us/requests/new

    We need helo with the Customer Consent field since the checkbox is awkwardly placed in the center and is very small compared to the text.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Kyna, I was on holidays so I couldn't answer.

    Copy the below code and paste as it is to your style.css file, the provided code snippet is tested for mobile devices and for RTL direction:

    #request_custom_fields_15603814360729_label{
          position: absolute;
        margin-left: 20px;
        margin-top: 3px;
    }
    [dir="rtl"] #request_custom_fields_15603814360729_label{
        margin-left: 0;
      margin-right:20px;
    }
    #request_custom_fields_15603814360729{
          position: relative;
        width: auto;
        top: 0;
    }

     

    Feel free to ask for further queries :)

    Thanks

    0

Please sign in to leave a comment.

Powered by Zendesk