How to position toolbar to bottom in bubble theme? (Not an Issue)

[madhavan-sundararaj]

I saw your ngx-quill live demo and in that, bubble theme has toolbar below the highlighted word but when I incorporate bubble theme, I get toolbar in top of highlighted word, this causes an issue when using on mobile phone where inbuilt mobile toolbar appears in top of word. I have added screenshot of how it's currently looking in my website.

I cloned your live demo repo and it works fine in that, i tried using all css stylesheet from your repo (including "/node_modules/quill/dist/quill.bubble.css") too but still I am getting it at top. Is there anything I am missing here?

My html code:
<quill-editor theme="bubble"> </quill-editor>

[KillerCodeMonkey]

ehhm i think this is a quilljs related issue. :)
quilljs/quill#1843

so maybe reopen the issue there?

But i have one idea:
ngx-quill and quilljs has a bounds config property. Try to pass a selector or parent node of your editor.

Default ist the document.body, if you pass the string self the editor element is used :)
https://quilljs.com/docs/configuration/#bounds
https://github.com/KillerCodeMonkey/ngx-quill#config --> check for bounds

And that is strange -> in my live demo is a bubble theme example, too. And there it is at the bottom
https://killercodemonkey.github.io/ngx-quill-example/

Just try my "hints" and if this does not work please ask directly in the quilljs repo

[madhavan-sundararaj]

I figured out one more thing, if you remove all the components and keep only app-bubble-editor in your live demo, the toolbar is shown on top, I thought this is something to do with editor height and tried increasing my editor height but still it was appearing on top and thank you for the reply, I will open an issue in quill js.

[KillerCodeMonkey]

thanks just let me know, if you found a solution or link your issue there.

[madhavan-sundararaj]

Yes, your solution worked bounds='self'. Thank you for your help and sorry for the late reply.

Cheers