Give a max height to quill editor

[Odrec]

I’m using streamlit’s the quill editor component to display the results of a transcription and to allow the users to edit the results of the transcription.

The problem is that sometimes the transcription is pretty big and the editor extends to the size of the content of the transcription which makes it huge and a pain to scroll all the way down the screen. Is there a way to control the max height of the editor and that the person can scroll inside the editor instead of the whole streamlit page?

I tried doing something like

        # Add CSS to limit editor height and enable scrolling
        st.markdown("""
            <style>
                .editor-container {
                    height: 400px;
                    overflow-y: auto;
                    border: 1px solid #d3d3d3;
                    border-radius: 4px;
                    padding: 10px;
                    box-sizing: border-box;
                }
            </style>
            """, unsafe_allow_html=True)

but it didn’t change anything.

Or does somebody know another editor that I can use to do this easier?

[raethlein]

Hey @Odrec , this works for me:

import streamlit as st

from streamlit_quill import st_quill

st.markdown("""
<style>
.stElementContainer:has(> iframe) {
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
""", unsafe_allow_html=True)

# Spawn a new Quill editor
content = st_quill(key='foobar')

# Display editor's content as you type
content

In the next release of the library you will be able to leverage the passed key as a CSS class like this:

import streamlit as st

from streamlit_quill import st_quill

st.markdown("""
<style>
.st-key-foobar {
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
""", unsafe_allow_html=True)

# Spawn a new Quill editor
content = st_quill(key='foobar')

# Display editor's content as you type
content

Does this help?

[Odrec]

Hi @raethlein, thx for the help!

Unfortunately, your example didn’t work for me. As you can see in the screenshot, the editor grows vertically when I add more text lines instead of reaching a max height and adding a scroll.

The idea of using keys as css classes is great!

[raethlein]

Hmm odd, for me the snippet

import streamlit as st

from streamlit_quill import st_quill

st.markdown("""
<style>
.stElementContainer:has(> iframe) {
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
""", unsafe_allow_html=True)

# Spawn a new Quill editor
content = st_quill(key='foobar')

# Display editor's content as you type
content

works:

What Streamlit version are you using?

[Odrec]

That’s indeed really strange. I just tried it again and same result for me. I’m using streamlit 1.38 with python 3.12. Latest streamlit-quill version too and on Brave browser.

I tried in Chrome and Firefox too and same result.

[raethlein]

Ahh in 1.38 the class name of the container is element-container, not stElementContainer (I have been testing with the version on the current develop branch), so the CSS part would be:

.element-container:has(> iframe) {
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}

[Odrec]

It worked! Thank you sooo much