Open
Description
Hey !
I am working with nexusUI these days and still loving it after all these years (thanks @taylorbf ;) )
The RadioButton introduces some undesired horizontal padding when the width is not a multiple of the height.
This is because the button's dimensions are configured like so :
var buttonWidth = this.width / (orientation === "vertical" ? 1 : this._numberOfButtons);
var buttonHeight = this.height / (orientation === "vertical" ? this._numberOfButtons : 1);
for (var i = 0; i < this._numberOfButtons; i++) {
this.buttons[i].resize(buttonWidth, buttonHeight);
}I'd suggest taking the min of (width, height) instead :
var buttonWidth = this.width / (orientation === "vertical" ? 1 : this._numberOfButtons);
var buttonHeight = this.height / (orientation === "vertical" ? this._numberOfButtons : 1);
var buttonSize = Math.min(buttonWidth, buttonHeight)
for (var i = 0; i < this._numberOfButtons; i++) {
this.buttons[i].resize(buttonSize, buttonSize);
}And then, setting the container's display to flex :
buildFrame: {
value: function buildFrame() {
this.element = document.createElement("div");
this.element.style.display = 'flex'
this.element.style.flexDirection = 'row' // or 'column' if vertical
this.element.style.justifyContent = 'space-between'
this.parent.appendChild(this.element);
}
},Then it looks like this :
I'd submit a pull request, but don't know the lib so well, and wanted to submit the idea first anyways ;)
Metadata
Metadata
Assignees
Labels
No labels