I have a input field
for users & others like email, telephone etc.
I want a input field
which take the width
of his content because user name can be small & large but right now what happens if the text is small it's take default width
which leave some unwanted space from the right.
I tried float, inline
but nothing works.
Check the fiddle http://jsfiddle.net/sandeep/Qa8R5/
I didn't want javascript for this
Thanks
There is no way using only CSS to make an input
element as wide as the text inside it.
The reason is to do with the fact that input
is a replaced element.
You need JavaScript, something like this.
I know you said you don't want JavaScript, but JS is the only way to answer your question.
Here's a working fiddle that demonstrates this functionality. Below is the code that is necessary to accomplish it. Source: jQuery - auto size text input (not textarea!)
Plugin:
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
Usage:
$('input#myinput').autoGrowInput({
comfortZone: 50,
minWidth: 200,
maxWidth: 2000
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With