All geek questions in one place

Tag input Bootstrap not displaying tags

I try my best to work with bootstrap boot tags, but I don’t see what I can do wrong. As far as I can tell, I even followed the steps in this post How to use Bootstrap boot input plugin

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous"> <form> <div class="form-group row"> <label for="name" class="col-sm-2 col-form-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags"> </div> </div> </form> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>

I see two things that are strange:

1) Tags are displayed in the DOM, but do not seem to have any background, so they seem invisible. But I see nowhere mention of the need to specify the default color in the documents.

2) The control apparently changes its size when you print and place tags that I don’t understand, since it should have a fixed size.

Does anyone know what I'm doing wrong here? Obviously, I could add some CSS hacks to get the tags, but I realized that it should just work out a field?

+5
source share
2 answers

This is actually the same as proving that the bootloader made a mistake:

Because it looks like they removed the support for the Bootstrap Tags Input plugin after 3.3.7

The code snippet below will work fine:

 .bootstrap-tagsinput { width: 100%; } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous"> <form> <div class="form-group row"> <label for="name" class="col-sm-2 col-form-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags"> </div> </div> </form> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>

when i deleted:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

and added:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

The background style began to appear, solving your first problem.

Secondly, this is actually the default behavior of the Bootstrap Tags Input plugin , you can refer to this link, which is their documentation page, in which you can see -

 .bootstrap-tagsinput { width: 100%; }

The above is the app.css style from app.css which refers to example paths. This style retains <input> 100% its parent width. Therefore, if you want 100% width, you should use your own style.

Hope this was helpful.

+6
source

Here's my observation: Bootstrap CSS is not loaded

1) Bootstrap 4.X in beta.

2) the integrity attribute does not allow loading CSS loading

I updated the code using the stable version of bootstrap

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" crossorigin="anonymous"> <form> <div class="form-group row"> <label for="name" class="col-sm-2 col-form-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control col-sm-12" value="" data-role="tagsinput" id="tags"> </div> </div> </form> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js" crossorigin="anonymous"></script>
+2
source

Source: https://habr.com/ru/post/1275918/

More articles:


All Articles