When I open toggles in my toggle panel the entire screen shifts down displaying a large grey or white area at top section of the row.. I have tried various things but unable to figure it out. Other toggles in other sections have the same Issue . My site is not in a live environment but I will attach some photos that will display my issue. Thank You for any direction or advice.
Are you able to assess using the screen shots I provided? Is there anything else I can provide for assistance? I dont have my website in a live environment I am creating the website offline, so there is no url. Thanks
If the Height of the Row that contains the Toggle is not tall enough this issue will occur. Try using our pre-built Salient Page layouts in the Salient Studio and check: https://themenectar.com/docs/salient/salient-studio/ .
When this feature is on the page jumps when the tabs are opened.. Im not sure if the issue is with that setting specifically or if there's a conflict with another setting causing the issue. I really like the Parallax Background Image Scroll feature.. Are theres any settings or anything I can possibly restructure so I can keep this feature on, or have this desired effect. Or is there any custom CSS that can change the row height?
I will attach a short video of the row/column settings for the live site right now... Any help greatly appreciated.. Also if there is any info I can give you to help me find a resolution please let me know. Thanks Again
Here's a JavaScript script you can add into the "Custom JS Code (Head)" box located in the Salient options panel > General Settings > CSS/Script related tab:
Thank You very much.. This solved the problem. no more huge grey section!!.. There is a bit of a jitter on the resizing of the activated toggle, but definitely not complaining at all. Looks way better.. Again thanks for addressing my issue.
Hi There,
When I open toggles in my toggle panel the entire screen shifts down displaying a large grey or white area at top section of the row.. I have tried various things but unable to figure it out. Other toggles in other sections have the same Issue . My site is not in a live environment but I will attach some photos that will display my issue. Thank You for any direction or advice.
Attached files: Top of Row when toggle IS exspanded.png
Top of Row when toggle is not exspanded.png
Hello Mark,
Thanks for keeping in touch.
Please send in your website URL so that we can check this out.
Thanks.
Are you able to assess using the screen shots I provided? Is there anything else I can provide for assistance? I dont have my website in a live environment I am creating the website offline, so there is no url. Thanks
Hey Again,
If the Height of the Row that contains the Toggle is not tall enough this issue will occur. Try using our pre-built Salient Page layouts in the Salient Studio and check: https://themenectar.com/docs/salient/salient-studio/ .
Thanks
ThemeNectar Support Team
Hi again,
I made this site live for you to take a look.. Is there a way to increase the size of a row so this doesnt occur..?
https://soulascentials.com/product/4021/
Scroll down to "USES" section and click "Joint Pain" you will see what I mean. Thanks for any direction..
Hey Again,
Try turning off the "Equal Height" feature in the Row Settings and check.
Thanks.
ThemeNectar Support Team
Hello There,
Unfortunately, That did not work.. After a lot of trial and error I may have figured out the possible culprit..
Row -- Background-- Animation --Parallax Background Image Scroll - ON (feature)
When this feature is on the page jumps when the tabs are opened.. Im not sure if the issue is with that setting specifically or if there's a conflict with another setting causing the issue. I really like the Parallax Background Image Scroll feature.. Are theres any settings or anything I can possibly restructure so I can keep this feature on, or have this desired effect. Or is there any custom CSS that can change the row height?
I will attach a short video of the row/column settings for the live site right now... Any help greatly appreciated.. Also if there is any info I can give you to help me find a resolution please let me know. Thanks Again
Attached files: Row-Inner Row-Column Settings.mp4
Thanks for the Additional Information. Escalating this to the developer for further response.
Best
ThemeNectar Support Team
Hey Mark,
Here's a JavaScript script you can add into the "Custom JS Code (Head)" box located in the Salient options panel > General Settings > CSS/Script related tab:
<script> jQuery(document).ready(function($){ let intervalID; const parallaxBgUpdate = () => { intervalID = setInterval(() => { $(window).trigger('salient-parallax-bg-recalculate'); }, 20); }; $('.toggles .toggle').on('click', () => { parallaxBgUpdate(); setTimeout(() => { clearInterval(intervalID); }, 700) }); }); </script>It will force the parallax background-size to recalculate when the toggle element is clicked.
Kind regards
Thank You very much.. This solved the problem. no more huge grey section!!.. There is a bit of a jitter on the resizing of the activated toggle, but definitely not complaining at all. Looks way better.. Again thanks for addressing my issue.