Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted March 1Mar 1 Community Expert When I am posting a log topic, I have to continuously scroll back up to the top of the page to use the menu bar in the editor? This just recently changed over the last 5.x updates:When I type on this forum, the menu bar is still there.
March 1Mar 1 Author Community Expert I was able to get it to work (kind of), by writing this into the console for debugging purposes:window.addEventListener("scroll", function () { const toolbar = document.querySelector(".ipsEditor__toolbar--main"); if (window.scrollY > 450) { toolbar.style.position = "fixed"; toolbar.style.top = "0px"; toolbar.style.display = "flex"; // Preserve flexbox layout toolbar.style.flexWrap = "wrap"; toolbar.style.width = "100%"; // Ensure full width when fixed } else { toolbar.style.position = "sticky"; toolbar.style.top = "var(--i-sticky-offset, 0px)"; } });I am not sure exactly why I have to force it to add the sticky after scrolling 450px, I did try clearing the forum's cache, and my browsers cache as well.
March 1Mar 1 Community Expert Unfortunately, I can't reproduce this here or on my test instance.Would recommend disabling or removing any third-party applications/plugins/themes/customizations if you're having any issues. If you continue to have issues, please add access for us to investigation:We would need to look further into this for you, however the access details on file appear to be incorrect or missing. Could you please update these details by visiting your client area, selecting the relevant purchase, then clicking "Review/Update Access Information" under the "Stored Access Information" section. We look forward to further assisting you.
March 1Mar 1 Author Community Expert Solution Thanks @Jim M,You gave me a hint to where it could be, I remember when I first installed v5, I wanted to have gradient top 1px bar above each of the boxes, when doing so, I was debugging with an overflow: hidden; in the css./* Pseudo-element for the top gradient border */ .ipsWidget:not(.ipsWidget--transparent)::before { content: ''; position: absolute; top: 0; left: 0; height: 1px; /* Adjust thickness here if needed */ width: 100%; background: linear-gradient(to right, hsl(22, 100%, 40%), hsl(215, 18%, 26%), hsl(22, 100%, 40%) ); border-top-left-radius: inherit; /* Inherit the same border-radius */ border-top-right-radius: inherit; /* Inherit the same border-radius */ z-index: 1; /* Ensures it stays on top of other elements */ } .ipsBox, .ipsEntry, .ipsLayout__primary-column > .ipsForm[action$="do=edit"] > .ipsForm, .ipsWizard:not(.ipsBox *) { position: relative; background-color: var(--i-box--ba-co); border-radius: var(--i-box--bo-ra); box-shadow: var(--i-box--bo-sh); border-width: var(--i-box--bo-wi); border-style: var(--i-box--bo-st); border-color: var(--i-box--bo-co); /* THIS WAS THE PROBLEM -> overflow: hidden; */ } /* Pseudo-element for top gradient border */ .ipsBox::before, .ipsEntry::before, .ipsLayout__primary-column > .ipsForm[action$="do=edit"] > .ipsForm::before, .ipsWizard:not(.ipsBox *)::before { content: ''; position: absolute; top: 0; left: 0; height: 1px; /* Adjust thickness here */ width: 100%; background: linear-gradient(to right, hsl(22, 100%, 40%), hsl(215, 18%, 26%), hsl(22, 100%, 40%) ); border-top-left-radius: inherit; /* Inherit the same border-radius */ border-top-right-radius: inherit; /* Inherit the same border-radius */ z-index: 1; /* Ensures it stays on top of other elements */ } /* Pseudo-element for the top gradient border */By commenting the: overflow: hidden; in the .ipsBox, .ipsEntry, .ipsLayout__primary-column > .ipsForm[action$="do=edit"] > .ipsForm, .ipsWizard:not(.ipsBox *) selectors, this resolved the problem. my mistake for calling in the calvary. Edited March 1Mar 1 by Code Name Jessica