cannot set height bounds on quill from its containing div

[adamskwersky]

Note, I am opening a new ticket because the old one was closed. 3469

When setting Quill bounds, editor still extends past the bottom. This is because the editor height is 100% and the toolbar takes up height as well. So the editor will always extend past the parent bounds when a toolbar exists.

Note, as mentioned when the old issue was closed, I am aware you can set the CSS for ql-editor class, two issues with this:

1. as my original issue had for expected behavior: "Editor should stay within the parent DOM's bounds." Setting the css of the inner div shouldn't be required here. The Quill should fit inside the parents bounds.

2. Setting CSS won't work for me because my product has user defined forms with arbitrary number of rich text fields having various heights. I cannot use CSS to set the individual fields because this information is not available at the time of coding. I need to set the height as an actual property on the HTML element. While I see you can set the height on the ql-editor div, that won't work for me because the div hasn't been created at the time the Quill element is instantiated. In the codepen, I want to be able to set the outer bounds of "#quill-container" to the size and position of the custom rich text control. I used css to demonstrate the problem but in my actual code I have explicit width, height and position attributes in the DOM. Why doesn't the Quill editor respect its outer bounds? This should be expected behavior in the absence of any sizing on ql-editor.

To more closely mirror how I use it, I forked the codepen to have the style attribute in the quill-container div.

Steps for Reproduction

1. Visit https://codepen.io/Adam-Skwersky/pen/ZEZyZgJ
2. Notice how editor has extended past the parent DOM's container

Expected behavior: Editor should stay within the parent DOM's bounds.

Actual behavior: Editor extends beyond it when there is overflow.

Platforms: NA

Include browser, operating system and respective versions Chrome and FireFox at least latest at time of writing FF 93.0 Chrome 95.0.4638.54

Version: "1.3.6"

Run Quill.version to find out

[adamskwersky]

I can't see your comment, so I cannot answer, but also please consider that I cannot use CSS because all my rich text controls have arbitrary positions and widths. I cannot pre-specify them in css. I can only set the outer bounds. Adam

From: Shaban Khan @.> Sent: Tuesday, March 26, 2024 9:32 AM To: quilljs/quill @.> Cc: Adam Skwersky @.>; Author @.> Subject: Re: [quilljs/quill] cannot set height bounds on quill from its containing div (Issue #4089)

[CAUTION: This Email is from outside the Organization. Unless you trust the sender, Don't click links or open attachments as it may be a Phishing email, which can steal your Information and compromise your Computer.]

Screenshot.2024-03-26.at.6.57.34.PM.png (view on web)https://github.com/quilljs/quill/assets/90864408/aa0041ed-6ce9-4554-b3b6-401a8566743f

Platform : Chorme

Hi, was this the overflow issue you're facing? I tried a single line of styling on codepen and it working fine, now overflow issue with me.

Reply to this email directly, view it on GitHubhttps://github.com/quilljs/quill/issues/4089#issuecomment-2020440060, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGG4VVM77UTGTP2AUW6BXA3Y2F2FZAVCNFSM6AAAAABFI5BMI2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRQGQ2DAMBWGA. You are receiving this because you authored the thread.Message ID: @.@.>>

::DISCLAIMER::

---

The contents of this e-mail and any attachment(s) are confidential and intended for the named recipient(s) only. E-mail transmission is not guaranteed to be secure or error-free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or may contain viruses in transmission. The e mail and its contents (with or without referred errors) shall therefore not attach any liability on the originator or HCL or its affiliates. Views or opinions, if any, presented in this email are solely those of the author and may not necessarily reflect the views or opinions of HCL or its affiliates. Any form of reproduction, dissemination, copying, disclosure, modification, distribution and / or publication of this message without the prior written consent of authorized representative of HCL is strictly prohibited. If you have received this email in error please delete it and notify the sender immediately. Before opening any email and/or attachments, please check them for viruses and other defects.

---