Hi,
In the code using a span around the InnerTextOfElement is commented out in the image property code.
Also I would suggest also to add the spans in other locations where a label is rendered:
RadioButton.prototype.getTemplate = function () {
var isChecked = this.referenceTag.domElement.checked || this.referenceTag.domElement.hasAttribute("checked");
return "<cf-radio-button class=\"cf-button\" " + (isChecked ? "checked=checked" : "") + ">\n\t\t\t\t<div>\n\t\t\t\t\t<cf-radio></cf-radio>\n\t\t\t\t\t<span>" + (this.referenceTag.label === "no-text" ? "" : this.referenceTag.label) + "</span>\n\t\t\t\t</div>\n\t\t\t</cf-radio-button>\n\t\t\t";
};
and
CheckboxButton.prototype.getTemplate = function () {
var isChecked = this.referenceTag.domElement.checked && this.referenceTag.domElement.hasAttribute("checked");
return "<cf-button class=\"cf-button cf-checkbox-button " + (this.referenceTag.label.trim().length == 0 ? "no-text" : "") + "\" checked=" + (isChecked ? "checked" : "") + ">\n\t\t\t\t<div>\n\t\t\t\t\t<cf-checkbox></cf-checkbox>\n\t\t\t\t\t<span>" + this.referenceTag.label + "</span>\n\t\t\t\t</div>\n\t\t\t</cf-button>\n\t\t\t";
};
Using a span around the element text provides better styling options.
This way radio buttons with and without text can be styled better.
Using inline-block and margin:0 auto makes the dot center (par example under the image), when the span is not empty some padding is added.
cf-radio-button.cf-button cf-radio {
display: inline-block;
...
margin: 0 auto;
}
cf-radio-button.cf-button cf-radio + span:not(:empty) {
padding-left: .5rem;
}
mzZzl,
JamBo
Hi,
In the code using a span around the InnerTextOfElement is commented out in the image property code.
Also I would suggest also to add the spans in other locations where a label is rendered:
and
Using a span around the element text provides better styling options.
This way radio buttons with and without text can be styled better.
Using inline-block and margin:0 auto makes the dot center (par example under the image), when the span is not empty some padding is added.
mzZzl,
JamBo