Checkbox tick move template on chrome

SOLVE
nnuyit
Participant

I'm currently have serious issue with a checkbox on the subscription form on the right side.
Whenever I click on it., it move the whole template to the left and I can not find the cause of it.

This is link of website: https://www.opswat.com/blog/opswat-central-management-v7-5-0-release

Does anyone know anything about this?
It only happens on chrome.

0 Upvotes
1 Accepted solution

Accepted Solutions
MatthewShepherd
Solution
Key Advisor

Hi @nnuyit 

 

The issue appears to be coming from the following CSS rule that sets the width of input elements to 100%, this is making the checkbox width over 1900px in my Chrome browser. When you check the checkbox this causes the rest of your content container to be pushed off the screen to the left.

 

#hubspot-form .form-email,#hubspot-form .form-search,#hubspot-form .form-text,#hubspot-form .form-textarea,#hubspot-form .form-url,#hubspot-form input.hs-input,#hubspot-form input[type=text],#hubspot-form input[type=email],#hubspot-form input[type=tel],#hubspot-form select.hs-input,#hubspot-form textarea.hs-input,#hubspot-form textarea[name=comments]{
	font-family: SimplonNorm,sans-serif;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background-color:#fff;
	border-radius:0;
	border:.0625rem solid #111f42;
	-webkit-box-shadow:inherit;
	box-shadow:inherit;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	color:#000a12;
	font-size:1rem;
	font-weight:400;
	height:3.125rem;
	padding:.5625rem 1rem .4375rem;
	-webkit-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	width:100%
}


If you change width to auto that appears to fix the issue.

 

width:auto;


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

View solution in original post

5 Replies 5
MatthewShepherd
Solution
Key Advisor

Hi @nnuyit 

 

The issue appears to be coming from the following CSS rule that sets the width of input elements to 100%, this is making the checkbox width over 1900px in my Chrome browser. When you check the checkbox this causes the rest of your content container to be pushed off the screen to the left.

 

#hubspot-form .form-email,#hubspot-form .form-search,#hubspot-form .form-text,#hubspot-form .form-textarea,#hubspot-form .form-url,#hubspot-form input.hs-input,#hubspot-form input[type=text],#hubspot-form input[type=email],#hubspot-form input[type=tel],#hubspot-form select.hs-input,#hubspot-form textarea.hs-input,#hubspot-form textarea[name=comments]{
	font-family: SimplonNorm,sans-serif;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background-color:#fff;
	border-radius:0;
	border:.0625rem solid #111f42;
	-webkit-box-shadow:inherit;
	box-shadow:inherit;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	color:#000a12;
	font-size:1rem;
	font-weight:400;
	height:3.125rem;
	padding:.5625rem 1rem .4375rem;
	-webkit-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
	width:100%
}


If you change width to auto that appears to fix the issue.

 

width:auto;


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

View solution in original post

nnuyit
Participant

Thanks for helping. I wonder how this error appear on chrome only because it has not happened before.

0 Upvotes
MatthewShepherd
Key Advisor

Did you make any changes to your CSS recently? All browsers do interpret CSS slightly differently which can lead to issues on one browser and not others.


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner

0 Upvotes
nnuyit
Participant

It has not changed recently. My co-worker did not find this issue with an old version of chrome.
Anyway, you just save my life. Thanks

0 Upvotes
MatthewShepherd
Key Advisor

No problem, glad that helped. Could you mark the above as the answer? Thanks.


Did my post help answer your query? Help the Community by marking it as a solution.

Matthew Shepherd

An Inbound Growth Agency
Platinum HubSpot Partner