Cell width editable size

[VivaldoMendes]

Description

Hi, congrats on the excellent initiative. Python needs a good reactive notebook.

I have been using Pluto notebooks a lot for teaching. I am testing marimo, and I need some functionalities in Pluto. For teaching, allowing the cell width to be editable according to the particular needs of an exercise (or a test) is extremely useful. In marimo, if I go to the settings button, I can choose three sizes: compact, medium, and full. But, suppose I need to change it to another size. Can I do it with some CSS code? For example, in Pluto, I can play around with the size and position of the cell's pane and the toc by applying something like this:

html"""
<style>
    @media screen {
        main {
        margin: 0 auto;
        max-width: 1700px;
            padding-left: max(200px, 10%);
            padding-right: max(380px, 10%); 
                }
}
</style>
"""

Can I do something similar in Marimo? Thanks.

Suggested solution

CSS code

Alternative

No response

Additional context

No response

[mscolnick]

@VivaldoMendes

You should be able to apply widths to different elements, using the .style() API. You can do this on ui elements (slider, text, etc), as well as layout elements (hstack, vstack)

import marimo as mo
mo.vstack([
    mo.ui.text(full_width=True).style({"width": "500px"}),
    mo.ui.text(full_width=True).style({"width": "300px"}),
    mo.ui.text(full_width=True).style({"width": "100px"}),
])

[VivaldoMendes]

Thanks for your reply. If I understand correctly, this method applies only to individual elements (cells), not to the entire document. Regarding the whole document, we cannot go over the three default alternatives: compact, medium, and full. Wright?

[mscolnick]

That is correct - it's just for the elements. The only widths are compact, medium, and full which we feel cover the use cases we found.

If this is for running marimo as an application with particular layouting - you may want to checkout the Grid Layout https://docs.marimo.io/guides/apps.html#grid-layout

[VivaldoMendes]

@mscolnick , Thanks for your help.

Will it be possible to use CSS to increase/remove some functionalities from an active notebook? We are running some courses using Pluto and Julia. In evaluation moments (tests/exams), we have to introduce some changes to the style of the notebook so that students will not have access to some of the notebooks's functionalities. For example, students will not be able to copy markdown text, or code, nor will they be able to create a new cell, or delete an existing one. Will it be possible to produce these kind of changes in marimo? Thanks

[mscolnick]

@VivaldoMendes - you can likely design tests/exams as applications (by running marimo run file.py). if you need code as input from the user, you can do mo.ui.code_editor to create these kinds of elements.

[VivaldoMendes]

@mscolnick, thank you very much.

[mscolnick]

no problem - @VivaldoMendes, im going to close this but please reach out if you have any more questions