ERPNext Conference 2019* ERPNext.com Blog

How to to Small Field in Doctype


#1

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


#2

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

This won’t work


#3

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


#4

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.


#5

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";

#6

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


#7

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


#8

in contacts doctype


#9

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


#10

i re arranged it and added custom fields


#11

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.


#12

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


#13

any ideas ?


#14

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


#15

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


#16

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.


#17

i get this in console
Capture


#18

That looks like success to me…


#19

can i make it on the same line
like this

image


#20

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