Easier control of output height

[liquidcarbon]

Marimo's output cells probably have style rules on them that are difficult to override (by design?)

But I'd really like to tweak height of the output container. I have some tall charts, and would like to make cell output to be say 50vh so you there's no vertical scrolling to see the whole chart.

Is there an easy hack to set min_height for output cells?

Related: https://github.com/marimo-team/marimo/issues/3189

[liquidcarbon]

This works:

mo.hstack([altair_plot, mo.Html("<style>.output-area {max-height: none}</div>")])

But changes styles for all cells. Would be nice to just do the current one.

[mscolnick]

You can do this with custom css: https://docs.marimo.io/guides/configuration/theming/?h=custom#css-variables

[liquidcarbon]

Can a cell have a unique, permanent ID for CSS targeting?

[mscolnick]

It is not guaranteed to have a unique "cell id", but you can name the cell and we can expose that on the cell data-cell-name={cell_name}

[liquidcarbon]

By "name the cell" you mean ... -> Name - so that in the code in appears as def tall_altair_plot(alt, df): instead of def _ ?

But that doesn't give a unique HTML ID, right?

<div tabindex="-1 ...
  <div class="Cell hover-actions-parent z-10 interactive needs-run" id="cell-HvtS">

Wondering if there's something clever that can be done with these cell IDs. Having this attribute accessible in python would be the first step. Is this what you mean by data-cell-name?

[mscolnick]

I was thinking marimo will add this:

<div class="Cell" id="cell-HvtS" data-cell-name="my_cell_name">

then you can use a selector in your custom css:

[data-cell-name='my_cell_name'] {
  // custom styles
}

[cfriedrichh]

It would be great to have this feature to enable a little bit more fine-grained custom styling in general. An alternative would be perhaps to be able to set a style attribute on cells.

[christianbudgetthuis]

Thanks for the fix. It looks like this attribute is not set when invoking the application using marimo run? For a minimal app:

import marimo

__generated_with = "0.10.15"
app = marimo.App(width="medium")


@app.cell
def testcell():
    import marimo as mo
    mo.md("test")
    return (mo,)


@app.cell
def _():
    return


if __name__ == "__main__":
    app.run()

I get the correct attribute when using marimo edit but not when using marimo run.

[christianbudgetthuis]

Furthermore, when the cell is part of an embedded app imported from another notebook, neither the cell id nor the new attribute is set on the cell. Perhaps this would be another issue though?

[mscolnick]

You are right. I'll handle these cases.