CODEWITHSUNDEEP
htmlcssinput
Łukasz
Łukasz

Reputation: 2172

HTML: how to adjust width of disabled INPUT

<input type="text" name="email" size="some size" disabled="true/false">

Form allows me to provide up to 35 characters long ID, which is read-only in edit mode (its rendered as disabled in such a case). How can I determine its width depending on text length? I want to be able to display the field wide enough so that whole text shows off. Tried it with size attribute but it is preety much useless, because it doesn't take font width into account. Like its to narrow for:

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwxxxxx

and too wide for:

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

any help will be appreciated

Upvotes: 1

Views: 2044

Answers (4)

Artur Udod
Artur Udod

Reputation: 4753

If you want the input's width to adjust the size of its contents then you'll have to do some js. An option is to create a temporary span with identical styling, fill it with the same text and measure its size:

 function UpdateWidth() {
        var input = $('#yourInputId');
        $('<span id="width">').append( input.val() ).appendTo('body');
        input.width( $('#width').width() + 1 );
        $('#width').remove();
    }

Note, that you have to ensure that the span has the same styling (font and etc).

Upvotes: 1

AnaMaria
AnaMaria

Reputation: 3621

You could have something like this

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Also adding the Mono-space font will take care of the trailing whitespace

WORKING DEMO

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

If you want the width of each letter to be taken into account then you could just use a monospaced font. Monospaced fonts have all characters at equal width:

input[type="text"] {
    font-family:monospace;
}

http://jsfiddle.net/JamesD/q7NRb/

Upvotes: 2

Talha
Talha

Reputation: 19262

<input type="text" name="email" size="some size" disabled="true/false" onkeypress="Adjustwidth(this);">

you have to adjust the width of your control with the help of some javascript like...

function Adjustwidth(obj)
{
     obj.style.width = ((obj.value.length + 1) * 8) + 'px';
}

Upvotes: 1

Related Questions