CMS Development

nnuyit
Teilnehmer/-in

Checkbox tick move template on chrome

lösung

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 Akzeptierte Lösung
MatthewShepherd
Lösung
Autorität

Checkbox tick move template on chrome

lösung

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;

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

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

Lösung in ursprünglichem Beitrag anzeigen

5 Antworten
MatthewShepherd
Lösung
Autorität

Checkbox tick move template on chrome

lösung

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;

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
nnuyit
Teilnehmer/-in

Checkbox tick move template on chrome

lösung

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

0 Upvotes
MatthewShepherd
Autorität

Checkbox tick move template on chrome

lösung

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.

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
0 Upvotes
nnuyit
Teilnehmer/-in

Checkbox tick move template on chrome

lösung

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
Autorität

Checkbox tick move template on chrome

lösung

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

Matthew Shepherd

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

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