Quill: Make bubble tooltip show within the bounds

Created on 22 Nov 2016  路  3Comments  路  Source: quilljs/quill

I have a small problem with a bobble theme as I want to have a overflow: scroll box that can be edited, its better to show then talk all day, maybe this is possible with css but i'm no expert.

Steps for Reproduction

bubble-fail-on-bottom

  1. Visit https://jsfiddle.net/ptts0afd/2/
  2. Click on a word at the bottom of content
  3. Bubble tooltip is hidden.

Expected behavior: Show
Actual behavior: Hidden
Platforms: Chrome, IE, Firefox
Version: 1.1.5

Thanks.

Most helpful comment

@jhchen Can you show in the updated jsfiddle please? following you instruction i could not get it to work.

I did find some class (style-sheet), and just removed them and it seems to fix the problem but why is happening i'm not sure.

.ql-bubble .ql-out-bottom,
.ql-bubble .ql-out-top {
  visibility: hidden;
}

All 3 comments

Using the Chrome Inspector on the ql-editor container, you will see it is not actually taking up the full height, due to the overwritten rule to auto !important. Adding a min-height: 100% rule fixes this.

@jhchen Can you show in the updated jsfiddle please? following you instruction i could not get it to work.

I did find some class (style-sheet), and just removed them and it seems to fix the problem but why is happening i'm not sure.

.ql-bubble .ql-out-bottom,
.ql-bubble .ql-out-top {
  visibility: hidden;
}

I also have this problem

Was this page helpful?
0 / 5 - 0 ratings