CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3bootstrap-tags-input
lowcoupling
lowcoupling

Reputation: 2169

bootstrap tags input width

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

enter image description here

Upvotes: 21

Views: 28852

Answers (6)

Rajin
Rajin

Reputation: 3

The reason behind this problem is, the bootstrap-tagsinput class is using display: inline-block;

the solution is, simply change the display: inline-block; to display: block;

Before change

.bootstrap-tagsinput {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}

After change

.bootstrap-tagsinput {
  display: block;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}

Upvotes: 0

John Smith
John Smith

Reputation: 61

Cristian almost guessed it
somewhere in js:

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

and in css:

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

Upvotes: 2

Cristian A. Rodr&#237;guez Enr&#237;quez
Cristian A. Rodr&#237;guez Enr&#237;quez

Reputation: 107

The reason you are seeing this behaviour is because the style actually override the width attribute:

style="width: 3em ! important;"

Remove the style:

$('.bootstrap-tagsinput > input').prop( "style", null );

This should work properly.

Additionally, set the desired width with CSS:

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

Upvotes: -1

Dan
Dan

Reputation: 9488

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

Upvotes: 9

Mohamad
Mohamad

Reputation: 35359

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

Upvotes: 51

Tyler Evans
Tyler Evans

Reputation: 579

I see the tagsinput plugin you are using comes with its own css file.

bootstrap-tagsinput.css

These css rules are automatically being added to your input when you add the data-role="tagsinput".

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 10px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;          //Try change this to 100% !important;
  display: block;             // Add this in
}

You need to update these so they don't over rule native bootstrap rule.

Upvotes: 0

Related Questions