Jump to content

Featured Replies

Posted
  • 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:

image.png

When I type on this forum, the menu bar is still there.

image.png

Solved by Code Name Jessica

Go to solution
  • 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.

  • 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. 

  • 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 by Code Name Jessica

Recently Browsing 0

  • No registered users viewing this page.