Redactor: Sticky toolbar not working

To add to this - the toolbarFixed setting in Redactor config file doesn't work. Although I have noticed that (seemingly randomly) one of the toolbars will lock, overlapping the edit screen header (even if I scroll out of the Redactor field it remains - clicking anything in the toolbar pops me back up to that Redactor field):

This is a real pain for some clients who post long bits of text to edit as we've shown them. Especially when editing the redactor config doesn't override Craft's settings. It appears that the 'overrides' in redactor config files are unable to override some, not all, settings.

Appears to be broken in Craft 2 and 3 (going by the Slack chat) but I suspect it was the enhancement in 2.6.3004 that's made it unusable.

Hi everyone! I had the same issue and a temporary fix can be made through CSS and connecting an executable file in the admen panel. Following is the code:

.redactor-layer {
z-index: 101 !important;
border-top: 0 !important;
}
.input .redactor-toolbar {
position: sticky !important;
border-bottom: 1px solid #e3e5e8 !important;
z-index: 102 !important;
background: #fff !important;
}

.elementselectormodal {
z-index: 1052 !important;
}

@brandonkelly Just wanted to check if this issue was going to be fixed in C2, as well as C3.

@zizther this issue only affects the Redactor plugin in Craft 3. The Rich Text field in Craft 2 supports the sticky toolbar.

@brandonkelly I and others, like @billythekid have noticed the same issue in Craft 2 as well

Just noticed it do work, but only at the mobile breakpoint.
And it’s JS related, since position:fixedis injected on the element.

Yeh broken on both Craft 2 and 3 for me too.

Sorry to comment on a closed issue, but I'm still unable to get the Redactor fixed toolbar to work in Craft 3.

Here you can see it isn't sticking to the top: https://img.lukepeters.me/07202018nhxkk.png

And here you can see I have toolbarFixed set to true in both of my config files: https://img.lukepeters.me/07202018fd0g0.png

@LukePeters What plugin version are you using?

@andris-sevcenko Redactor version 2.1.2, installed via the Plugin Store.

@LukePeters is it possible to get access to the site where you're seeing this? If so, can you shoot it over email to [email protected] and reference this issue?

@LukePeters Thanks! Just released 2.1.3 which fixed this issue!

@andris-sevcenko the sticky toolbar still doesn't work for me. I've tested this in the latest versions of Chrome, Firefox & Safari.

Me too I'm afraid, using 2.1.3.

@lukeyouell 2.1.3?

@mattandrews any chance of getting access to the site where you're seeing this? Same deal as above - shoot access over to [email protected]

I'm afraid I can't arrange that (corporate policies etc) but I just manually applied the changes in your fix here and it looks like it's working!

@mattandrews It's fixed for the next release (v2.1.4 probably), coming soon.

Still not working on single column layout.

@KatieMFritz what Craft and Redactor versions are you using?

Craft Pro 3.3.13
Redactor 2.4.0

Experiencing this in craft Pro 3.3.15 and Redactor 2.4.0. Used in a Matrix field.

Edit: Appears to work UNLESS the Live Preview is open, then it does not.

I'm using latest craft and latest redactor from plugin store and "toolbarFixed": true does not work for me either :(

Also, I'm not sure if related or not, but also the "context" menu when clicking on a link will show up off screen, ie have to scroll up to see it, but it looks like nothing even happens when you click a link (Long content related).

Working on my end, but seems to only kick in when the toolbar has gone up above the entire window, not just above the sticky page header.

Yeah I'm not sure why but I just worked around the issue by using the CP CSS plugin and overriding the css for the toolbar to make it position: sticky and jump between the two top values for the two different media queries:

div.redactor-toolbar-wrapper {
    position: sticky !important;
    top: 60px !important;
    background: #fff;
    z-index: 11 !important;
}
@media screen and (max-width: 975px) {
    div.redactor-toolbar-wrapper {
        top: 114px !important;
    }
}

@RickKukiela Make sure you’re running the latest versions of Craft and Redactor.