Custom styling: split window with input and suggested output

front-end
usage
(Nicolai Bjerre Pedersen) #1

I wish to make a split window. Left side being a custom HTML report and right side a suggested output. Is this kind of custom styling possible?

Can I only fiddle with card_css? I’d like to expand the size of the card for sure for this kind of task.

(Ines Montani) #2

To expand the card, you can use the "cardMaxWidth" setting in "theme", which takes a number for the pixels. If you set it to a higher number, the card can be wider.

For everything else, you might want to use a custom "html_template"? You can style it inline, or use the "global_css" for it. Here’s a simple example – imagine your task data looks like this:

{"html_report": "<strong>Some HTML here</strong>", "output": "Suggested output here"}

Your template could then look like this:

<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem">
    <div style="font-family: monospace; white-space: pre-wrap; border-right: 1px solid #ccc">{{html_report}}</div>
    <div>{{output}}</div>
</div>

I’ve used CSS grid here for the split window, because the markup is super straightforward – just note that it’ll require a relatively modern browser to work. You might also want to tweak the paddings and formatting, or set a fixed height and overflow: auto on the children to make them scrollable.

Quick mockup of what it would look like (obviously, the variables would be replaced with your content):

1 Like