Make Your Quill Editor Bar Sticky
Have you ever written a long post in UNA and realized that you have to keep scrolling back up to use the bold button or other editor bar buttons? What a pain! No more. Here's CSS and JS you can inject into your site within your Designer app. It seems to work but I have not tested it thoroughly yet. If anyone has improvements, please share. And, UNA devs, this should be the default behavior for the editor. Don't you agree?
JS:
//sticky editor bar
document.addEventListener("DOMContentLoaded", function() {
const toolbar = document.querySelector('.ql-toolbar');
const editor = document.querySelector('.ql-editor');
if (toolbar && editor) {
const toolbarOriginalTop = toolbar.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
const editorTop = editor.getBoundingClientRect().top;
if (editorTop < 0) {
toolbar.style.position = 'fixed';
toolbar.style.top = '0';
} else {
toolbar.style.position = 'sticky';
toolbar.style.top = `${toolbarOriginalTop}px`;
}
});
}
});
CSS:
.ql-toolbar {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
z-index: 10;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
border-bottom: 1px solid #ccc;
}
-
I was confused by this, but I forgot that I made a tweak to the quill editor in another way when I had a user complain about this very issue.
I ended up adding a max-height to the textarea field and having it show the scrollbar via enabling overflow through CSS by default.
Though I think your tweak may be better suited than mine.
.ql-editor { max-height: 200px; } -
I added a GIF to the first post. It's pretty slick!
-
FYI: I updated the JS in the first post to get rid of a null error when the toolbar isn't present.
-
Great work! Now if we can just figure out how to get rid of the double space that is there even when using Shift + Enter on PC. :P
I'm aware this is not a UNA issue but a design choice from Quill itself, just gets frustrating when users create text based content that doesn't require the empty new line with each break.
-
Nice, I like it! I will be testing on my site. 😁👍
-
I would remove the background-color from CSS, unless you don't use dark mode.
Also, found a few places the editor doesn't catch, and I know why, so I'll provide a fix for the JavaScript. Nice though, and I'm definitely leaving it in.
-
Sounds good to me. Yeah, due to the top sticky menu, it sometimes doesn't catch.
-
Happens on Mac too. You are supposed to be able to add JS to change this behavior but so far I can't get it to work. UNA could look into Quill's docs and probably figure it out. I'm sure it's not a priority or UNA prefers it the way it is. If that's the case, then there's not much we can do.
-
Umm, all things can be changed. And , as far as top bx-toolbar that auto hides and then shows it self, I corrected that by checking the attribute transformY and if it isn't -100% adding 48px to the top fixed value. This keeps it below the toolbar. (Also check must be <48).
Still investiting a way for it to always work. Issue is element selector is too broad, and pages that have multiple editors, even hidden (like comments or other inputs) the check is off. Not sure about iOS, I'm an android guy. I am working on a solution.
-
I was talking about the double space issue LoneTreeLeaf brought up. It can be changed, I just don't feel like figuring it out. 😀
As far as selector being too broad, yes. It would be nice if UNA core added more unique css selectors here and there. Is it just me or is it a trend in modern web development to not worry about unique selector names? Maybe it's because of the big frameworks used and/or because of flexbox design, or who knows.
If I ever built a CMS from scratch (which I won't) I'd ensure there were unique CSS selectors all over the place. Every page would have a selector matching it's title or something. Every textarea would have a unique selector and common one. One can dream... 🛌
-
Actually, every instance has a unique ID. 😎👍
-
Oh nice! Does it change or is the ID always the same for that field?
-
Class selectors for unique design would be a nightmare. Especially if they would all look similar (class is usually just for design, where ID is for unique identification of an element).
-
Its by module, and unique each time. Not sure how its being generated, didn't look under the hood.
-
It has always been a blessing for me. That old WP CMS... many themes use a lot of tag/category/page title css selectors. It makes CSS customization quick and easy. But, that's just what I'm used to.
-
So.ething else that has always been an annoyance is when you search like in site members and you click on a profile and then back k out to return to the members search it always kicks you back to the very first page instead of sending you back to the search page you were on. It really sucks when like in page 22 a d it kicks you all the way back to the first one, lol....
Separate thought lol
-
This actually could be fixed easily. All that needs to be done is URL updated with pagination. It is actually an easy task. But would need to be implemented by UNA.
-
Small CSS update. This seems to work well for the background color of the fixed editor toolbar in both light and dark mode.
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
