- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Input forms JS improperly compile or conflict on page load
SOLVEJan 22, 2020 1:24 PM
I'm having some trouble with my form inputs displaying properly. The issue is that my label css styling can't apply some of the time. The issue appears to be stemming from the way the hs-form-field is compiled at page load. What's supposed to happen is that the ".hs-form-field" wrapper is supposed to inject both the .hs-input or <input> and <label> inside another wrapper classed called ".input". See below for the correct example.
Correct Example
<div class="hs-form-field"> <div class="input"> <input class="hs-input"> <label>child</label> </div> </div>
And the weird part is that sometimes, it does! But like the flip of a coin, if you try reloading the page a few times, you'll see that it occasionally gets compiled differently. The improper way it gets compiled is by injecting the <label> as a direct child of the ".hs-form-field", then placing that ".input" class wrapper next with the actual <input> as it's child. See below for an incorrect example.
Incorrect Example
<div class="hs-form-field"> <label>direct child</label> <div class="input"> <input class="hs-input"> </div> </div>
I'm really more familiar with HTML & CSS so this issue is a bit over my head. My best guess is that there is some JS or jQuery somewhere that's conflicting with the code within my main linked js file. Below, I've attached some screenshots of the two instances that are happening on page loads, as well as the snippets of code that I believe are relevant, and finally a public link to the page so you can inspect. Someone with expertise in this area please help me solve this! Thanks!
Public Link
https://learn.finixpayments.com/demo-hubspot-community-js-error
CSS Classes from my Stylesheet
.body-container .input label { position: absolute; top: -10px; left: 10px; z-index: 2; display: inline-block; vertical-align: middle; line-height: normal; background-color: #fff; font-size: 12px; padding: 2px 5px; } .hs-form-field > label {}
Linked Javascript file function
////////////////////////////////////////////////////////////////////////////////////////////////////// $(window).load(function () { $(".hs-form-field").each(function () { $(this).children("label").insertAfter($(this).children(".input").children(".hs-input")) }); });
Compiled correctly, styles apply properly!
correct
Compiled incorrectly, styles DONT apply!
incorrect
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
Jan 24, 2020 3:52 PM
Hey @finixdesigner
Any luck?
If not I had another thought pop into my head. A few weeks back I was creating a module that lifted a form and moved it to another part of the page with jQuery (don't ask why). If i'm remembering correctly the form sometimes loads slower than the rest of the page, which cause errors when trying to access the form. I fixed this by delaying the retrieval. In your case it could look like this:
window.onload = function(){ setInterval(function(){ $(".hs-form-field").each(function (index) { var $this = $(this), label = $this.children("label"); label.insertAfter($this.children(".input").children(".hs-input")) }); }, 1500); // set in milliseconds };
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Jan 31, 2020 10:05 PM
Holy cr*p that did it!!!! So your first two didnt work unfortunatly, it was this last one that did the trick! I was actully able to just remove the milsec delay. Wow many I cannot thank you enough, i've gotten very little help from support on this one and am not strong in Java so from the bottom of my heart, THANK YOU!!!!
Here was the final applied solution:
window.onload = function(){ setInterval(function(){ $(".hs-form-field").each(function (index) { var $this = $(this), label = $this.children("label"); label.insertAfter($this.children(".input").children(".hs-input")) }); }); };
🙂
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content