I want to know how to change the position of a checkbox
AnsweredI like to use checkboxes in guide theme. However, the current checkbox is displayed to end users as shown below left in the guide.
This looks very strange. It's like someone will say to me, "Did you put the wrong CSS?"
The current look of the checkbox is very strange, and it also takes up a lot of lines. And end users are very confused.
I want the checkbox to look like the bottom right.
Does anyone here know how to make the checkbox reposition using JS? I'd appreciate it if you let me know.
-
hey 이지훈,
Can you share the public URL of your HC? I can see your form and provide the exact solution.
Thanks
-
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.
-
Hi, Ifra.
I made the following for you.
https://ahnlab310.zendesk.com/hc/en-us/requests/new
-
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
-
Ifra, you are my hero!!
I'll apply it right away and let you know if it works.
-
Hi. Ifra.
Is it possible to move the checkbox in front of the label as in the image below?
-
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!!
-
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.
-
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.
-
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;
} -
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.
-
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: -
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.
-
:)
-
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> -
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. -
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
Please sign in to leave a comment.
18 Comments