force input element's width to size to its content/value

Question

I'm trying to unstyle an input element so that its text looks like plain/inline-text, and I've reset pretty much every css property it can have, but I can't get the input's width to adjust/shrink to its content (input { width:auto; min-width:0; } does not work). It obeys an arbitrary width like input { width: 10px; }, so obviously its width is adjustable.

I see people trying to do it with javascript (the fiddle from the answer doesn't work anymore), so I'm wondering if what I want is even possible.

Here's a fiddle.

It would be nice to see what you've tried so we aren't duplicating steps. Show the styles you're using. — isherwood
– isherwood, Commented Feb 15, 2013 at 22:39
@isherwood, oh sorry. I created a fiddle but forgot to link it in the question. — Jakob Jingleheimer
– Jakob Jingleheimer, Commented Feb 15, 2013 at 23:07
Is something wrong with defining a specific width? Telling it to be 5em wide seems about right for any given date that would fill that text field. — cimmanon
– cimmanon, Commented Feb 16, 2013 at 0:35

Kevin Boucher · Accepted Answer · 2013-02-15 22:39:48Z

1

Played with this. Couldn't do it. What are you trying to achieve? Are you aware of the contenteditable attribute?

This might get you what you need.

https://developer.mozilla.org/en-US/docs/HTML/Content_Editable

answered Feb 15, 2013 at 22:39

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jakob Jingleheimer Over a year ago

I think I have to use an input element (working with jqueryUI's datepicker and using a div causes the calendar to appear within the div).

isherwood · Accepted Answer · 2013-02-16 01:03:16Z

1

What if you just avoid the whole style snafu and do a little text shuffling? You already have everything you need with jQuery.

http://jsfiddle.net/2fQgY/8/

The date is <span class="dateSpoof"></span><input class="myDate" type="hidden" value="foo" />. 
Thanks for coming.

$('.myDate').datepicker({
    showOn: 'button',
    buttonText: 'select...',
    onClose: function () {
        var dateText = $(this).val();
        $('.dateSpoof').html(dateText);
        $('.ui-datepicker-trigger').hide();
    },
    dateFormat: 'd M yy'
});

Here's an example that's resettable: http://jsfiddle.net/2fQgY/11

And here's one that's all text and nothing but text: http://jsfiddle.net/2fQgY/14

edited Feb 16, 2013 at 1:03

answered Feb 16, 2013 at 0:37

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

5 Comments

Jakob Jingleheimer Over a year ago

The problem with that is it's supposed to look like plain text (no button or input field). Also, once the data has been picked, it can't be re-picked (which will happen somewhat frequently in my app).

Jakob Jingleheimer Over a year ago

AngularUI (github.com/angular-ui/angular-ui/tree/master/modules/directives/…) turns anything (except an input element) onto which the datepicker is applied into the container for the calendar: <span ui-date="{options}">15 Feb 2013<span> becomes to the calendar's container. I didn't mention AngularUI in my original question because my question wasn't about datepicker/AngularUI. I see if I can hack the lib to avoid this obnoxious behaviour (but the directive is rather complicated).

Jakob Jingleheimer Over a year ago

kind of…i'd have to write my own directive to use your method.

isherwood Over a year ago

Fair enough. It was a fun little project anyway.

Jakob Jingleheimer Over a year ago

isherwodd: I just discovered angular-ui's jq directive (github.com/angular-ui/angular-ui/tree/…), so I may be able to use your method after all :)

Collectives™ on Stack Overflow

force input element's width to size to its content/value

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related