JSFiddle - React, Tailwind, and code Playground
CSS
.option1 {
position:relative;
}
.option1 .title {
text-align:center;
line-height:46px;
}
.option2 .button {
width:120px;
overflow:hidden;
}
.option2 .title {
text-align:center;
}
.measured-header .measured-header-title {
text-align:center;
overflow:hidden;
}
JavaScript
/**
_enyo.FittableLayout_ provides the base positioning and boundary logic for
the fittable layout strategy. The fittable layout strategy is based on
laying out items in either a set of rows or a set of columns, with most of
the items having natural size, but one item expanding to fill the remaining
space. The item that expands is labeled with the attribute _fit: true_.
The subkinds <a href="#enyo.FittableColumnsLayout">enyo.FittableColumnsLayout</a>
and <a href="#enyo.FittableRowsLayout">enyo.FittableRowsLayout</a> (or
<i>their</i> subkinds) are used for layout rather than _enyo.FittableLayout_
because they specify properties that the framework expects to be available
when laying items out.
For more information,see the documentation on
[Fittables](https://github.com/enyojs/enyo/wiki/Fittables) in the Enyo
Developer Guide.
*/
enyo.kind({
name: "enyo.FittableLayout",
kind: "Layout",
//* @protected
calcFitIndex: function() {
for (var i=0, c$=this.container.children, c; (c=c$[i]); i++) {
if (c.fit && c.showing) {
return i;
}
}
},
getFitControl: function() {
var c$=this.container.children;
var f = c$[this.fitIndex];
if (!(f && f.fit && f.showing)) {
this.fitIndex = this.calcFitIndex();
f = c$[this.fitIndex];
}
return f;
},
getLastControl: function() {
var c$=this.container.children;
var i = c$.length-1;
var c = c$[i];
while ((c=c$[i]) && !c.showing) {
i--;
}
return c;
},
_reflow: function(measure, cMeasure, mAttr, nAttr) {
this.container.addRemoveClass("enyo-stretch", !this.container.noStretch);
var f = this.getFitControl();
// no sizing if nothing is fit.
if (!f) {
return;
}
//
// determine container size, available space
var s=0, a=0, b=0, p;
var n = this.container.hasNode();
// calculate available space
if (n) {
// measure 1
p = enyo.dom.calcPaddingExtents(n);
// measure 2
s = n[cMeasure] - (p[mAttr] + p[nAttr]);
//enyo.log("overall size",...