Input Field with Show Character Count and no Style Width Has Zero Width

[cancan101]

An Input field set to show character count but w/o setting a width in the style field will render with zero width:

admin-ui-classic-bundle/public/js/pimcore/object/tags/input.js

Lines 122 to 133 in c9b60ca

	return Ext.create("Ext.Panel", {
	cls: "object_field object_field_type_" + this.type,
	style: "margin-bottom: 10px",
	layout: {
	type: 'vbox',
	align: 'left'
	},
	items: [
	this.component,
	charCount
	]
	});

Something like width: input.width - input.labelWidth needs to be passed to the Panel constructor.

The text box can be fixed with:

However this width also needs to subtract the labelWidth:

admin-ui-classic-bundle/public/js/pimcore/object/tags/input.js

Lines 106 to 112 in c9b60ca

	var charCount = Ext.create("Ext.Panel", {
	bodyStyle: '',
	margin: '0 0 0 0',
	bodyCls: 'char_count',
	width: input.width,
	height: 17
	});

This mostly works:

        if(this.fieldConfig.showCharCount) {
            var charCount = Ext.create("Ext.Panel", {
                bodyStyle: '',
                margin: '0 0 0 0',
                bodyCls: 'char_count',
                width: input.width - input.labelWidth,
                height: 17
            });

            this.component.setStyle("margin-bottom", "0");
            this.component.addListener("change", function(charCount) {
                this.updateCharCount(this.component, charCount);
            }.bind(this, charCount));

            //init word count
            this.updateCharCount(this.component, charCount);

            return Ext.create("Ext.Panel", {
                cls: "object_field object_field_type_" + this.type,
                style: "margin-bottom: 10px",
                layout: {
                    type: 'vbox',
                    align: 'left'
                },
                width: input.width - input.labelWidth,
                items: [
                    this.component,
                    charCount
                ]
            });

        }

Though the box is slightly clipped:

[github-actions]

Thanks a lot for reporting the issue. We did not consider the issue as "Pimcore:Priority", "Pimcore:ToDo" or "Pimcore:Backlog", so we're not going to work on that anytime soon. Please create a pull request to fix the issue if this is a bug report. We'll then review it as quickly as possible. If you're interested in contributing a feature, please contact us first here before creating a pull request. We'll then decide whether we'd accept it or not. Thanks for your understanding.