Attribute For Style=Display: Inline-block - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

Attribute For Style=Display: Inline-block

Adrian

Adrian

Helix Framework 3 days ago

Somewhere within the Helix framework there is a very subtle difference beween the cassiopeia template and the shaper helix utimate.

When using a contact form from another provider called "Contact Enhanced" and I have an annoying problem with fields moving down the screen as thay are filled in.

Have look here :https://groupndracing.com/contact-us

When using Cassiopeia template the following changes happen: When the form loads, the <label> element under the <input> field has an attribute for Style="Display:none" After entering something into the first <input> field and then clicking onto the second<input> field the <label> element under the first<input> field has an attribute for Style="Display:block" 

When using shaper helix ultimate template the following changes happen: When the form loads, the <label> element under the <input> field has an attribute for Style="Display:none"  After entering something into the first <input> field and then clicking onto the second<input> field the <label> element under the first<input> field has an attribute for Style="Display:inline-block"

According to some very limited research i have done, Display:inline-block will reserve space based upon the line height of the parent element which in this scenario is 27px based ubon the line-height of the outer <div> but Display:block does not reserve any space

When set to use helix template and using the browser console i can change this attribute from inline-block to block and thus remove the unwanted space.

Somewhere within the Helic Framework or the Ultimate template there is a very subtle difference in how form fields are managed that sets the following <label> attribute to Display:inline-block rather than display:block

Hopefully you can identify whats causing this subtle yet very annoying problem

0
1 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 days ago #207205

Hi Adrian,

Helix Ultimate uses Bootstrap for general appearance. Evidence

info_3356_2025.jpg So if you want to change something, you have to use Custom CSS to override current style (class). I think it should be the best & safe method.


Your contact form looks totally OK (screenshot, cropped ) info_3355_2025.jpg

If do the job, should be OK. Of course in the future you can consider using different Form & reCaptcha.

0