I want to reduce the size of the size and material field box to size of item name and code field.
I tried dragging the bottom right arrow in the box but after refresh it came to its original size.
I would strongly advise against using the Data fieldtype if you ever intend to register or use an event handler on it. The reason being that the event handler will trigger whenever there is a slight delay in typing, eg the keyUp interval is around 300 milliseconds.
Rather use the Small Text fieldtype and reduce it’s height, as you’re thinking of doing. Small Text only triggers it’s event handlers on lost focus, not on a lull in typing.
On the DocType definition, provide a value for the “Max Height” setting in px, em, rem
Note however that this is the maximum height the input control will expand to, not only the initial height.
Since Small Text can accommodate up to a maximum of 65,535 or 64KB characters, unlike the 140 for the Data fieldtype, you can continue typing beyond the Max Height. In which case a scroll bar will automatically render to the right of the input control.
The default initial height for Small Text is 150px (about 7 lines of text). Unfortunately you cannot set the Initial Height as you can set the Max Height and retain the capacity to expand it.
function set_small_text_height() {
let field = "size";
let text_area = $(`textarea[data-fieldname="${field}"]`);
let height = "150px"
text_area.css("height", height);
}
frappe.ui.form.on("Your Doctype", {
refresh: function (frm) {
set_small_text_height();
}
}
Hi @NCP
Since the minimum height cannot be set, I suggested another method. If just setting max height is enough, @Anjalijangid can use @EugeneP 's answer.