How to reduce the size of a field box

ERPNext Customize ERPNext
1

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.

This is how it looks -

image
image635Ă—636 11.1 KB

This is how it should look -

image

2

Hii @Anjalijangid

Change the field types of both fields from small text to data.

Screenshot 2024-07-23 211303
Screenshot 2024-07-23 2113031722Ă—796 77 KB

3

Hello @Anjalijangid

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.

Screenshot from 2024-07-23 20-28-35

2 Likes
4 
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();
    }
}

This way you can change the height of small text.

1 Like
5

Hi @MinHyeong-Lee and @Anjalijangid,

You can easily set it without script via customize form that @EugeneP provided in the post, so follow the step.

2 Likes
6

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.

2 Likes
7

I cant see the option of max height
only these options are available

image

8

I did that previously but when I add it in quotation item child table it is difficult to fetch data when fields are in data format.

Well its working now, but is there any problem id a change it from small text to data in any other connected Doc-type?

9

Also, when i converted it in data form this message appeared, only mentioned type of info is allowed as data.

image