U2's extra spans interfere with flex layouts
bshepherdson opened this issue · 1 comments
bshepherdson commented
The following model demonstrates this problem:
CLASS({
package: 'foam.demos',
name: 'Repro',
extends: 'foam.u2.Element',
imports: [
'dynamic',
],
properties: [
{
name: 'stuff',
factory: function() {
var a = [];
for (var i = 0; i < 8; i++) {
a.push('' + (Math.floor(Math.random() * 20)));
}
return a;
}
},
],
methods: [
function initE() {
this.cls(this.myCls());
this.add(this.dynamic(function(stuff) {
return stuff.map(function(x) {
return this.E('span').cls(this.myCls('cell')).add(x);
}.bind(this));
}.bind(this), this.stuff$));
},
],
templates: [
function CSS() {/*
^ {
display: flex;
}
^cell {
background-color: #e0e0e0;
flex-grow: 1;
margin: 8px;
}
*/},
]
});
It intends to fill the available width with the 10 boxes, but instead they're minimum-size. See the extra <span>
s introduced by the dynamic code.
bshepherdson commented