How can I give a Limelight stack extra space at the top and or bottom?
Another thing is why do I have a lot of extra space at the bottom of my limelight launcher stack?
See here - https://divinusdesigns.com/support/ by hitting the Send Message button.
I’m also having scrolling issues with my limelight stack using a formloom 4 stack on mobile, how come it’s not scrolling down on mobile?
You can change the content height to Proportional Height and set the height to be less than 100% of the browser height.
There is no space at the bottom of the Limelight Launcher stack which has your button in it. It is exactly the height of the button - I can only assume that you mean the extra space at the bottom of the FormLoom content when in the lightbox.
This space is in the Formloom page that is iFramed and I suspect that Formloom has calculated the height incorrectly due to it being in a lightbox and not being visible on page load. FormLoom uses Javascript to calculate the height that it requires and then adds that as an inline style. It is generally not a good idea to put things that work in this way into light boxes or accordions etc that are not visible on page load unless they have a function that can be used to refresh their height after the lightbox has opened (which Limelight can do).
Same as previous answer - I guess FormLoom does not like being in a lightbox that is not visible on page load and so calculates its height incorrectly thus preventing scrolling.
@tav Thanks all the help. I was able to fix the top and bottom spacing issues.
Just still having issues with the extra space at the bottom under my form, I’ve tried using Safari’s dev tools to try and over right and set the iframes hight to a hight of 1150px, which fixes the issue but i’m just having an issue try to get it applied in RW.
I’ve tried using,
#yd-iframe-stacks_in_487_page5 {
height: 1150px;
}
but that’s not applying on the live page. Any ideas on what exact code to use or any other ideas on how I can get the extra space to be gone?
And one other thing I just noticed its way is the forms content above the lightbox and on the border?
That div is the Form Loom iFrame. You would need to put the CSS on the page where the form is coming from - styles on the parent page cannot affect content within an iFrame. You would also need to override the inline style (that FormLoom adds via JS) using a special [style] selector.
However…
Disclaimer: Formloom is obviously calculating the height because it needs to do so, altering this would generally be a bad idea, without knowing why the height was being calculated.
You could try height:auto bit again, you would need to put this on the source page where the form is being pulled from (https://divinusdesigns.com/contactusform/)
#yd-iframe-stacks_in_487_page5[style] {
height: auto!important;
}
@tav Okay thanks, but do you also have any idea why the forms content is on top of the lightbox and on the border?
Its odd that it is overflowing - not seen that before but I will investigate further an issue an update if there is a problem. In the mean time just add this CSS to the page or site wide code
.infix-content{
overflow:hidden
}
You should also sort out the JS errors on the page just to make sure that is not breaking other things.
It looks like jQuery has not loaded before that script tag in the HTML is running and attempting to use it in the following:
@tav Okay, I add that code and it looks better and fixed that issue.
And I’m not sure how to fix JS errors, the code from the screen you shared is a code Nick Cates told me to put in to get that “Request A Quote” button in the menu bar, it does work so i’m not sure what your seeing that could break other things.
If you would like to help with that i’d greatly appreciate it.
The code you have inserted requires jQuery. The $ variable is assigned to jQuery. The error reports that it is unassigned because jQuery has not yet been loaded or assigned to the variable $ at the time you are calling it.
