View Full Version : [OPEN] [#1822] Button alignments in textfield using Material theme

Apr 14, 2020, 1:09 PM
Hi Sir,

While I was walking through Ext.Net Examples using Material theme and I found the issue related to the buttons alignments in text field.

If user add the button right to textfield but still its add to left side of text field and I have attached screen shot for your quick reference.

Note : I found issue only using Material theme.

Thank you,

Aug 04, 2020, 12:57 AM
Thanks for pointing out the issue. We will investigate.

Aug 04, 2020, 4:58 AM
Thank you,

I'm having same issue with Material theme in my webApp, Can you please fix this ASAP.

Note : I have attached examples screenshot for quick reference only.


Aug 05, 2020, 3:40 AM
Hello @Vamsi!

We have logged the issue in github under #1822 (https://github.com/extnet/Ext.NET/issues/1822), and will post a follow-up as soon as we have this merged and ready for the next Ext.NET release.

Meanwhile, you can work this issue around by using this override:

Ext.define("Ext.net.theme.material.form.field.Text", {
override: "Ext.form.field.Text",

listeners: {
change: function (field, value) {
if (field.el) {
field.el.toggleCls('not-empty', value || field.emptyText || field.leftButtonsAffectsLabel());

render: function (ths, width, height, eOpts) {
if ((ths.getValue() || ths.emptyText || ths.leftButtons || ths.leftButtonsAffectsLabel()) && ths.el) {

leftButtonsAffectsLabel: function () {
var me = this;

return Ext.isArray(me.leftButtons) && me.leftButtons.length > 0 &&
me.labelAlign == "top" && me.leftButtonsShowMode &&
me.leftButtonsShowMode != "focus" && me.leftButtonsShowMode != "nonblank";

addButton: function (button, side) {
var me = this,
ctRef = (side || "right") + "ButtonsCt",
hadCtRef = false,

if (!me[ctRef]) {
hadCtRef = false;

retVal = me.callParent(arguments);

if (!hadCtRef && me[ctRef]) {
me[ctRef].el.setStyle("width", "unset");

if (side == "left" && me.leftButtonsAffectsLabel() && !me.hasCls("not-empty")) {

return retVal;

Let us know if even with the above fix the issue is still reproducible or some unexpected visual behavior is still present in the related component and functionality.

Hope this helps!