If I have a HTML file with the tag <input type="text" size="3" …>it does what it should do, it renders an input element with the width of 3 characters. On the other hand, if I have the tag <input type="number" size="3" …> it renders the default width for an input field (much longer than 3 chartacters).
I know I can make a custom class with a .myclass { width: 75px; }, but I think it would be much easier to use the size attribute, specially if I know for a number field that the numbers accepted will be from 0 to 100, why to use a wider input field?
Is this done by design? Am I required to use CSS for this? If that so, how can I render an input field of exactly three characters wide according to the font family/size I'm using in the form?
Size is not an attribute for input type=number, it has min and max attribute to specify minimum and maximum number. To adjust width you will have to use width style.
I just tested the following:
<input type="number" size="20" min="1" max="5"/>
The size attribute didn't respond on Chrome or FireFox, but very surprisingly it did work on Internet Explorer 11.
My guess is it's still in the process of receiving global compatibility, and I would recommend creating a css class to handle the width as you so desire.
Here is a fiddle of the code for testing purposes.
<input type="number" min="1" max="5">
Is this what you are looking for? Other then that, I haven't found anything that would resize the input. I think the best thing to do is use css in your css file or add style="" to the input field.
This seems to work for me.
<input type="number" size="3" max=1 min=5>
Edit. Need to add min and max for size to work.
Related
I've got this html:
<h5>
Select IMDB Rating
</h5>
<input type="radio" id="rdbtnAllIMDB"</input>
<label for="rdbtnAllIMDBA">All</label>
<p><input type="radio" id="rdbtnGOE" checked="checked"</input>
<label for="rdbtnGOE"> >= </label>
<input type=number step=0.1 value="7.5" size="4"</input></p>
...and, altough set to size 4, the input number is quite wide:
...and it doesn't change one way or the other with changes to the value given "size"
The same trick (adding a small size value) works just fine here.
What am I doing wrong?
Definition of input size From MDN Web Docs:
Valid for email, password, tel, and text input types only. Specifies
how much of the input is shown. Basically creates same result as
setting CSS width property with a few specialities. The actual unit of
the value depends on the input type. For password and text, it is a
number of characters (or em units) with a default value of 20, and for
others, it is pixels. CSS width takes precedence over size attribute.
Therefore, it will not work for input of type="number"
The reason you are not seeing changes is that you have to set the min and max value. If you don't set the value of min and max, this input box will set its width in such a way that the highest limit number can be seen completely.
The size attribute will help you set the width of the input box based on the same concept described above of not loosing the view port of the value in input boxes. But, it won't be supported when the step function is used with input type number.
<h5>
Select IMDB Rating
</h5>
<input type="radio" id="rdbtnAllIMDB"</input>
<label for="rdbtnAllIMDBA">All</label>
<p><input type="radio" id="rdbtnGOE" checked="checked"</input>
<label for="rdbtnGOE"> >= </label>
<input type=number step=0.1 value="7.5" min="0" max="10"</input></p>
As "95faf8e76605e973" (apparently a Welshman or a Finn) said, you can't get there from there.
This CSS works, though:
input[type=number] {
width: 64px;
}
Now my input number widgets look like so:
What is the best way to add some attributes to<input type="number"> so the length of this element is the same for all the most popular browsers?
Actually, I used size="5" for <input type="text" size="5"> but I'd better use type="number".
Does <input type="number" size="5" min="1" max="10000" value="1000"> so I put size attribute as well look correct?
Any more possible improvements so all browsers have the same width of this element?
Also (if possible) I would make it for the nearest future so I shouldn't change it within a year or so.
the best option is to set input's size using css:
input[type=number]{
width: ...;
}
then you are sure that it will be the same in all browsers
How do you match up the size and maxlength of a text input box? It is very annoying that the maxlength and size attributes don't line up and are dependent on the font use.
Example input:<input type="text" size="4" maxlength="4" />
Any suggestions?
I don't think it will match up and it will very depending on the browser. Best bet is to use CSS to set the width of the input.
<input type="text" maxlength="4" value="1234" />
input {width:30px;}
http://jsfiddle.net/BqEsd/67/
You could also come up with some sort of function to size it based off of character, font size, and language. Something like this for example..
Example:
http://jsfiddle.net/krishollenbeck/ohpy5L95/3/
I have an <input> that I want to be smaller than size="1" but I do not know how to make it smaller. Is it possible to do this?
I tried using fractions and decimals but neither worked.
You can assign it a pixel width instead:
<input type="text" style="width: 4px">
For type="text", no. At least, not using the size attribute:
The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.
I have the following element which specifies the size="15". However the rendered element, which has the size attribute, has a width that fits 25 characters and could fit 30 or so if maxlength was greater? Maxlength does limit the # of characters.
<input id="txtSearch" name="txtSearch" type="text" maxlength="25" size="15" />
Monospaced Font
The best results I've seen came through using a monospace font:
<input type="text" size="4" style="font-family:monospace" />
Online Example: http://jsbin.com/epagi/edit Rendered neatly in Firefox, Chrome, Safari, and IE.
If you're using a variable-width font, you would have to use scripting to get a better guess as to what the expected width would be, but as you said, this isn't very elegant.
Variable-Width Font
I tried to work up a reasonable-simple solution for variable-width fonts, but ultimately you will need to see if it fits your project or not.
Basically what I did was set the text-transform of particular inputs to uppercase to get a semi-consistent expectation for how wide something will be when filled out with text. I then applied a classname that indicated the field should be auto-sized, and how many chars we're expecting: sizeMe-4. Using jQuery, I collected all of these inputs, and split this classname to get the number of chars expected.
I extended the String object to include a repeat method which allows me to easily create a string of the expected size, and add it to an ad-hoc span element to get the width. This width was then retroactively applied to the initial input element. The span is then discarded.
Online Demo: http://jsbin.com/epagi/2/edit
For convenience, here's the code:
<input type="text" name="pin" maxlength="4" class="sizeMe-4"
style="text-transform:uppercase" />
--
String.prototype.repeat = function(num) {
return new Array( num + 1 ).join( this );
}
$(function(){
$(":input[class^='sizeMe']").each(function(){
var size = Number($(this).attr("class").split("-").pop());
var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
$(this).width( $(newW).width() );
$(newW).remove();
});
});
It probably depends on the font you are using, and what character you are testing with!
Lot of outdated bad information
Good luck getting
size="100" to work in Chrome, not going to work
for inline style
style="width:20px"
My case is:
when using an outer div with a class "input-group", the size or inline style will not work at all. Removing this class of "input-group" if possible will make it work.
<div class="input-group">
<input type="text" class="form-control" required style="width:20px">
</div>