It appears that changing the size attribute does not change the size of the input box as anticipated based on the doc. Whether it’s set to 4 or 400, I get the same size box. This is the code I’m using:
dcc.Input(
id=“someID”,
type=‘number’,
size=‘400’,
min=0,
debounce=True,
placeholder=“1”,
value=1
)
This is quoted from the doc:
size ( string ; optional): The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.’ simply states “the user agent should ensure that at least that many characters are visible”, but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.
This looks fine:
But when the browser width is reduced, the inputs stack on top of each other:
FURTHERMORE,
With dcc.Input(type=‘text’), it appears that setting the size attribute hardcodes the width of the box, whereas not setting the size attribute results in the input box having a hardcoded minimum width of 20 characters.
I would like to 1. not hardcode a width and 2. not have a minimum width for my text inputs, so that if the browser has a small width, the adjacent text inputs adjust dynamically to the width and do not stack atop each other as shown here:
Is this possible to do?