CMS Development

nnuyit
参加者

Checkbox tick move template on chrome

解決

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 いいね!
1件の承認済みベストアンサー
MatthewShepherd
解決策
キーアドバイザー

Checkbox tick move template on chrome

解決

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.

元の投稿で解決策を見る

5件の返信
MatthewShepherd
解決策
キーアドバイザー

Checkbox tick move template on chrome

解決

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
参加者

Checkbox tick move template on chrome

解決

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

0 いいね!
MatthewShepherd
キーアドバイザー

Checkbox tick move template on chrome

解決

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 いいね!
nnuyit
参加者

Checkbox tick move template on chrome

解決

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 いいね!
MatthewShepherd
キーアドバイザー

Checkbox tick move template on chrome

解決

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.