disable scrolling in main content

[havok2063]

How can I disable scrolling of the main content area and force the content to fill 100% of the view window. I tried adding style='height: 100vh, overflow: hidden' to the solara.Column but this didn't work.

import solara
import pathlib

def get_config():
    """ create custom jdaviz configuration """
    from jdaviz.core.config import get_configuration

    # get the default specviz config
    config = get_configuration('specviz')

    # set custom settings for embedding
    config['settings']['viewer_spec'] = config['settings'].get('configuration', 'default')
    config['settings']['server_is_remote'] = True
    config['toolbar'].remove('g-data-tools') if config['toolbar'].count('g-data-tools') else None

    return config

def get_nb():
    return 'this is a test'

all_files = ['a', 'b', 'c']
files = solara.reactive([all_files[0]])

@solara.component
def Page():
    with solara.Column(style='height: 100vh, overflow: hidden'):
        solara.Title("Spectral Display")

        css = """
        main.v-content.solara-content-main {
           padding: 0px !important;
        }

        .jdaviz {
            height: 50vh !important
        }
        """

        solara.Style(css)
        import jdaviz
        from jdaviz import Specviz, Application
        import ipysplitpanes
        import ipygoldenlayout
        import ipyvue
        import os
        from jdaviz.app import custom_components

        ipysplitpanes.SplitPanes()
        ipygoldenlayout.GoldenLayout()
        for name, path in custom_components.items():
            ipyvue.register_component_from_file(None, name, os.path.join(os.path.dirname(jdaviz.__file__), path))

        ipyvue.register_component_from_file('g-viewer-tab', "container.vue", jdaviz.__file__)

        def load_data():
            filename = 'path/to/a/test/file.fits'
            for f in files.value:
                label = f'{pathlib.Path(f).stem} 0'
                label = 'spec-017057-59631-27021598108289694 0'
                if label not in spec.app.data_collection.labels:
                    spec.load_data(filename, format='SDSS-V spec multi')

        with solara.Columns([1, 0, 1], style='margin: 0 5px'):
            with solara.Tooltip("Select the spectral files to load"):
                solara.SelectMultiple("Data Files", files, all_files, dense=True)

            solara.Button("Load data", color='primary', on_click=load_data)

            with solara.FileDownload(get_nb, "solara-lazy-download.txt"):
                with solara.Tooltip("Download a Jdaviz Jupyter notebook for these data"):
                    solara.Button(label='Download Jupyter notebook', color='primary')

        with solara.Column(style='height: 100vh, overflow: hidden'):
            filename = '/path/to/a/test/file.fits'

            config = get_config()
            app = Application(configuration=config)
            spec = Specviz(app)
            spec.load_data(filename, format='SDSS-V spec multi')
            display(spec.app)

[iisakkirotko]

Hi @havok2063!

I think what you're trying to do is correct, but the comma between the CSS attributes should be replaced by a semicolon.

[havok2063]

@iisakkirotko ahh yes thanks. that disabled the scrolling, but it doesn't resize my main content to fit the browser view window.

[iisakkirotko]

@havok2063 So you want the content of the topmost solara.Column to take up all available space? If that's the case, I'd give the content you want to grow flex-grow: 1 (they need to also have display: flex, and the align-items or justify-content properties of the topmost solara.Column might need to be changed to stretch. You can find more details here)

[havok2063]

@iisakkirotko Yeah either the top solara.Column (i.e. the entire page content) or the bottom solara.Column component. But your suggestion didn't work for me. I'm wondering if there's a css conflict or overriding happening with the any of the children pieces. Do you have a working example?

[iisakkirotko]

@havok2063 That's interesting, since this seems to work fine for me (I did add flex-grow: 0; to the solara.Columns element, which I forgot to mention)

import solara

all_files = ["a", "b", "c"]
files = solara.reactive([all_files[0]])

@solara.component
def Page():
    with solara.Column(style="height: 100vh; overflow: hidden;"):
        solara.Title("Spectral Display")

        css = """
        main.v-content.solara-content-main {
           padding: 0px !important;
        }
        """

        solara.Style(css)

        with solara.Columns([1, 0, 1], style="margin: 0 5px; flex-grow: 0;"):
            with solara.Tooltip("Select the spectral files to load"):
                solara.SelectMultiple("Data Files", files, all_files, dense=True)

            solara.Button("Load data", color="primary")

            with solara.FileDownload("solara-lazy-download.txt"):
                with solara.Tooltip(
                    "Download a Jdaviz Jupyter notebook for these data"
                ):
                    solara.Button(label="Download Jupyter notebook", color="primary")

        solara.Column(style="overflow: hidden; flex-grow: 1; background-color: red;")

Could maybe be a style collision with something from jdaviz, since I don't have any of those elements in my version?

[havok2063]

@iisakkirotko there very well could be a style collision with jdaviz, however I can recreate it with an image. If I replace your last Column with

        with solara.Column(style="overflow: hidden; flex-grow: 1; background-color: red; height: 100vh;"):
            image_url = "https://picsum.photos/500"
            solara.Image(image_url, width='100vw')
            display(image_url)

the image fills the full viewer width but not the viewer height. The scrolling is turned off so it's cutoff. If I remove the style from both solara.Column pieces then I can see the full image by scrolling vertically. I figured the height: 100vh would make the image fill the browser viewport?

[iisakkirotko]

@havok2063 After looking at this for way too long, I think I've finally figured the solution:

import solara

all_files = ["a", "b", "c"]
files = solara.reactive([all_files[0]])

@solara.component
def Page():
    with solara.Column(style="height: 100vh; width: calc(100vw - (100vw - 100%));"):
        solara.Title("Spectral Display")

        css = """
        main.v-content.solara-content-main {
           padding: 0px !important;
        }
        """

        solara.Style(css)

        with solara.Columns(
            [1, 0, 1], style="padding: 0 5px; flex: 0 1 auto; margin:0;"
        ):
            with solara.Tooltip("Select the spectral files to load"):
                solara.SelectMultiple("Data Files", files, all_files, dense=True)

            solara.Button("Load data", color="primary")

            with solara.FileDownload("solara-lazy-download.txt"):
                with solara.Tooltip(
                    "Download a Jdaviz Jupyter notebook for these data"
                ):
                    solara.Button(label="Download Jupyter notebook", color="primary")

        with solara.Column(
            style="justify-content: stretch; flex: 1 1 0; min-height: 0; background-color: red;"
        ):
            image_url = "https://picsum.photos/500"
            solara.v.Html(
                tag="img",
                attributes={"src": image_url},
                style_="display:flex; flex: 1 1 0; min-height: 0;",
            )

• For the topmost Column, height: 100vh; is fine, as long as nothing additional (like a scroll bar) is there at the bottom of the screen.
• We need width: calc(100vw - (100vw - 100%));, because 100vw includes the whole viewport, even the (now empty) spot where the usual scrollbar is.
• We can use overflow: hidden; on the topmost Column, but this isn't necessary, as long as we have margin: 0; on Columns (by default the element used to make the Columns, .row has a margin of -12px for... reasons)
• On the bottom-most columns and the image element, I've used shorthand flex: 1 1 0; for

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;

  together with min-height: 0; to tell the browser if can make the element as small in height as it wants (images want to scale their height based on their natural aspect ratio) sneaky edit: You can also use height: 100%; width: 100%; on the image to reach the same result.

Let's hope that this finally works for both of us.

[maartenbreddels]

Also, we have improved the scrolling situation in #518 and #477 If there is still an issue with scrolling, please re-open this issue, otherwise we'll assume all is resolved now.