bootstrap-tags
bootstrap-tags copied to clipboard
When I create a a tag-list input field is not displayed correctly
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.
Add this $('.tags-input').css('width','');
in your jquery code.
I have same issue