bootstrap tags input width

Question

I am trying to use bootstrap tagsinput in a form contained in a modal like this

...
<div class="form-group">
                            <label for="myTagLabel">Tags:</label> 
                            <input class="form-control" id="myTag"  type="text" data-role="tagsinput">
                        </div>

As you can see in the image above I can't see why the input doesn't have the width of the containing form.

UPDATE this http://www.bootply.com/f43d1A0YxK reproduces the issue

Solution 1

The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.

What you want to change is the .bootstrap-tagsinput class:

.bootstrap-tagsinput {
  width: 100% !important;
}

Here's a demo: http://www.bootply.com/1iATJfFM69

Solution 2

Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.

.bootstrap-tagsinput{
    display: block;
}

This will overwrite the display: inline-block; that is being inherited.

Bootply Demo

Solution 3

Cristian almost guessed it
somewhere in js:

$('.bootstrap-tagsinput > input').css('width', '');

and in css:

.bootstrap-tagsinput input {
  width: 10em;
}

Comments

[vil]

try input-sm class instead of form-control

[lowcoupling]

hi, I have tried, it doesn't work. :(

[rails_id]

for other option if someone want to increase width of input tags check out this fiddle

[Soroush]

you can set placeholder for your original input and the new input size is adjusted according to the placeholder you added.

[lowcoupling]

I can't see how they have managed to do that here timschlechter.github.io/bootstrap-tagsinput/examples

[lowcoupling]

I have added a bootply reproducing the issue

[Brett Caswell]

after reviewing the demo, I think the better declaration here would be to declare display:block, width:auto; margin: auto 0;; that way padding and border declarations do not create issues.

[user763410]

@Mohamad, If I want to a class to the div "tagdivclass" and style it, how would I add the class?

[Mohamad]

@user763410 short of hacking around the plugin's source to add the class, you can add a wrapper element with your custom class, or override the elements CSS...

[user763410]

@Mohamad, I looked around in the source it seems like a hard coded thing. So, I have to hack around the plugin's source

[Mário]

needs display: block

[Riccardo]

add also this line to fix the placeholder .bootstrap-tagsinput input{ width: 100% !important; }

[Rachel Martin]

Why the !important? That seems like overkill.