bootstrap-tags icon indicating copy to clipboard operation
bootstrap-tags copied to clipboard

When I create a a tag-list input field is not displayed correctly

Open etcware opened this issue 8 years ago • 2 comments

I have my tag-list in a accordion panel.

     <div id="collapse5" class="panel-collapse collapse">
	<div class="panel-body">
	    <div id="categorie234" class="tag-list"></div>
			<script>
				$(document).ready(function() {
			        $('#categorie234').tags({
			        	tagData:["prova1", "prova2"],
			            tagSize:"md",
			        });
			    });
			</script>
	   </div>
	</div>

When my page is displayed I find this code:

<div class="panel-body">
	<div id="categorie234" class="tag-list bootstrap-tags bootstrap-3" style="padding-bottom: 602.2px;">
<div class="tags"><div class="tag label btn-info md">    <span>prova1</span>    <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>  </div><div class="tag label btn-info md">    <span>prova2</span>    <a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>  </div></div><input type="text" class="form-control tags-input input-md" placeholder="" style="padding-left: 12.6px; padding-top: 591px; width: 0px;"><ul class="tags-suggestion-list dropdown-menu" style="display: none;"></ul></div>
			<script>
				$(document).ready(function() {
			        $('#categorie234').tags({
			        	tagData:["prova1", "prova2"],
			            tagSize:"md",
			        });
			    });
			</script>
			
			
			</div>

As you can see there is a style="padding-bottom: 602.2px;" and the input field has a width: 0px; that hide the input area. If I delete a tag the input area is correctly displayed.

etcware avatar Feb 02 '17 10:02 etcware

Add this $('.tags-input').css('width',''); in your jquery code.

adit50 avatar Sep 28 '17 15:09 adit50

I have same issue

luongtran avatar Jun 11 '19 17:06 luongtran