Question regarding auto positioning/layout about blessed HOT 9 OPEN

Is there a way to place two boxes on a parent box, and put box 2 at the bottom of box 1 even if box 1 has 'shrink' height?

from blessed.

Blessed does not have an auto-position feature. It's very tough to decide exact behavior. Blessed could implement some very primitive auto positioning easy enough, but it wouldn't be anything as complex as the box model positioning in css. It would be more like position: inline for everything probably. I'll leave this open because it's a feature I've considered for a while.

from blessed.

Hi, Blessed is great stuff!

I was thinking about something similar. Essentially, one could build a "packer" for layouts once the elements been rendered. I saw some note that you build the UI from bottom up, children first. I really like the "shrink: true" option, that seems to do some autosizing of basic widgets. However, there is no "packer" widget/container. I was looking at what would be needed for this, but was not able to ascertain the size of any UI element even after it's been rendered.

I made three checkboxes, rendered in various sizes and content and positions
(changed test/widget-form.js)

var i = 3;
function makeRadio(name) {
var radio1 = blessed.radiobutton({
parent: form,
mouse: true,
keys: true,
shrink: true,
style: {
bg: 'white'
},
height: i-2,
left: i-3,
top: (i++)*3-6,
name: name,
content: name,
});
return radio1;
}

var x = makeRadio('AAAA');
var y = makeRadio('BBBBB');
var z = makeRadio('CCCCCC');

top, bottom, width,height, left, right, content

3, 37, 91, 1 0, 0 "AAAA"
6, 33, 90, 2 1, 0 "BBBBB"
9, 29, 89, 3 2, 0 "CCCCCC"

I cannot interpret the values, the bigger widget have smaller values, none of them related to actual width size, length. The only values that makes sense are "top" and "left".

I've read the docs and it says some values are calculated but I can't interpret them.

Source code reading next I guess!

from blessed.

I'm not sure what your question is. Without seeing the dimensions and position of form, I can't tell you if those values are correct or not. Could you explain more?

from blessed.

cc @secrettriangle, @yaronn, @mscdex

I whipped up a Layout element last night when I couldn't sleep. The first real auto-positioning feature for blessed. It's very dynamic: anyone can provide their own positioning callback. The default positions elements similar to inline-block.

• https://github.com/chjj/blessed#layout-from-element
• https://github.com/chjj/blessed/blob/master/lib/widgets/layout.js

Thoughts?

from blessed.

Definitely think we need something like this. Doing something kind of silly here so maybe this will make it cleaner. I'll try it out soon.

from blessed.

I'm thinking of dropping the Layout element and just adding the renderer option to all elements, along with builtin layout options: grid, and inline.

from blessed.

That last commit sort of perfects grid vs. inline.

from blessed.

Hello, what about a paragraph that takes one line on desktop but two on mobile ? The next element below won't automatically preserve the padding. Thanks

from blessed.