`@NTBond` and `MultiCheckBox` not rendering very well

[dmetivie]

When I use MultiCheckBox with @NTBond the result is not super pretty because the text is forced on the right. Is it possible to display the check boxes at the center?
Thanks

[disberd]

So this is not super straightforward as it would require some CSS (and some knowedge).

I am also going through a refactor/rewrite of the package so I might see if there is a way to make this easier in the refactor.

The current structure is that each bond will translate into an html item like this:

<field-html class='actual_fieldname'>
  <field-description class='actual_fieldname'>...</field-description>
  <field-bond class='actual_fieldname'>...</field-bond>
</field-html>

The table is organized in a CSS grid with two columns, the first for the description and the second for the bond value.

The best way (that I can think of) to modify a single row is to change the field-html of that bond to display: flex; and play with the flex value of the bond and description in a way that makes the display look as you'd expect.

Here is an example for you specific usecase

And here is the corresponding code

# ╔═╡ d069f493-0ab4-4632-a8f3-399f198d2f67
nn = [
	"asd"
	"lol"
	"boh"
	"mah"
]

# ╔═╡ 43d59027-01eb-4e7f-8f56-3123b537bdb7
@bind lol @NTBond "Magic" begin
	estimator_idx = (MultiCheckBox([i => n for (i,n) in enumerate(nn)], select_all = true, orientation = :column, default = [1,2,4,5]))
	other_bond = (Slider(1:10))
end

# ╔═╡ 676bbc11-7954-43b2-8205-5cd30e011eb2
html"""
<style>
field-html.estimator_idx {
	display: flex;
	grid-column: 1 / span 2;
	place-self: stretch;
}
field-html.estimator_idx field-description {
	flex: 1;
}
field-html.estimator_idx field-bond {
	flex: 1.5;
}
</style>
"""

You can play with the flex value of field-description and field-bond to have the desired effect.

Here are some very useful reference guides on how grid and flex work in CSS for reference (I think it's very useful to learn a bit of CSS for customizing how things appear on Pluto):
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

At the moment unfortunately there is no very simple solution like changing a kwarg to have this effect

[dmetivie]

Thank you!
BTW thanks for the great package. I just discovered that confirm button is naturally compatible with your NTBond.
This is amazing (and much needed when playing with different parameters).

"Envoyer" in French

[disberd]

Thank you!
BTW thanks for the great package. I just discovered that confirm button is naturally compatible with your NTBond.
This is amazing (and much needed when playing with different parameters).

Hi @dmetivie

Did you know that the green button that appears at the top right is a sort of confirm button?
You can toggle it to by clicking on it and it will pause bond update until you make it green again.

I made it specifically because I often want to change multiple parameters before triggering a recomputation so it's automatically baked into every ntbond or struct bond for convenience

[disberd]

This issue can actually be solved quite nicely with a cell with custom css like so:

<style>
	struct-bond plj-multi-checkbox[style*="flex-direction: column"] {
		align-items: start;
	}
</style>

Due to this I am closing this issue as part of some cleanup