CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3typeahead.js
zoran119
zoran119

Reputation: 11307

Is it possible to make .tt-input wider?

The typeahead example on the typeahead website seems to limit the width of the .tt-input using 3em !important in the style of the element, so that when you type something which is longer than 3em it starts to scroll out of view in this tiny input.

How can I make .tt-input wider?

Here is a screenshot to help explain what I'm talking about: http://oi57.tinypic.com/2vvt9qc.jpg.

Upvotes: 1

Views: 1059

Answers (3)

Tenshiko
Tenshiko

Reputation: 1470

I had the same problem and Eepzy is correct: bootstrap-tagsinput.js does use the placeholder text to determine the size of the input field, but the 3em is only used if you don't have a placeholder text that is a least 3 characters long.

I think editing a 3rd party js is not good practice in general.

There is a different solution to our problem: just use a placeholder text.

<input type="text" class="tagsinput" placeholder="Type here..."/>

Any text (except whitespaces) will do as long as it is at least 3 characters long.

Upvotes: 0

Eepzy
Eepzy

Reputation: 111

This appears to be hardcoded into bootstrap-tagsinput.js, see lines 46-47:

var inputWidth = (this.inputSize < 3 ? 3 : this.inputSize) + "em";
this.$input.get(0).style.cssText = "min-width: " + inputWidth + " !important;";

inputSize is computed based on the placeholder text. If there is none, it will default to 3em. You might want to change these lines to obtain a different value, or remove the attribute altogether. I'm not entirely sure why it's there.

Upvotes: 1

scooterlord
scooterlord

Reputation: 15339

set the class to this:

input.tt-input {
width:auto !important;
}

... make sure you put it AFTER the typehead css so that it's overwritten.

Upvotes: 0

Related Questions