How to to Small Field in Doctype

hi
i’m creating a custom contact doctype and i want to add extension field next to landline
some thing like this


how can i achieve this

See what inserting a Column Break between Landline and EXT fields does.

This won’t work

2 Likes

yes it will make theme equal size and not on the same line

This is exactly what I am not sure of. I don’t know of any method which will let you place fields next to each other.

However somebody who knows UI of ERPNext better than me can answer.

1 Like

Try to set width of fileds through custom script

document.querySelectorAll("[data-fieldname='ext']")[1].style.width ="100px";
document.querySelectorAll("[data-fieldname='landline']")[1].style.width ="20px";
1 Like

thanks for your replay
unfortunately it didn’t work with me

@fatheyabdelslam What doctype is this in? I’ll help look for the code.

in contacts doctype

What version are you running? Mine doesn’t look like this (latest develop)

i re arranged it and added custom fields

OK, I’m confused. This picture shows what you have or what you want? If it’s what you want, point me to the reference for it and I can try to dig out the formatting for the EXT field.

1 Like

Oh i’m sorry this is my fault i didn’t mentioned that this is the desire result i want
i made this picture with photoshop

any ideas ?

frm.get_field("phone_extension").wrapper.style.width = "30px";

1 Like

i added it in Custom Script but Unfortunately it didn’t worked :confused:

I got it to work in the console with cur_frm.

Step through to make sure you don’t have any undefineds showing up. Could also be a browser? I tested in Chrome.

i get this in console
Capture

That looks like success to me…

can i make it on the same line
like this

image

Yes but it’s some work and if you’re sticking with fixed pixel widths, it’s going to look bad for somebody somewhere, which is why you should really be manipulating this with classes.

  1. Make the landline width shorter
  2. Assign and move frm.get_field("phone_extension").wrapper with jQuery… append? after? I forget the right function