Open
Description
Hi,
I'm having an issue when trying to use a selectpicker inside a column of a ng-table, the dropdown is being duplicated and I can't find the reason.
Just as an example, I created the following table:
<div class="table-responsive" style="width: 1300px;">
<table ng-table="batchUserCtrl.tableParams" class="table table-bordered table-hover">
<tr ng-repeat="classification in $data" class="vert-align">
<td data-title="'ID'" sortable="'object.object_id'" class="vert-align col-sm-1">
<a href="">{{classification.object.object_id}}</a>
</td>
<td data-title="'Texto'" sortable="'object.text'" class="vert-align col-sm-2">
{{ classification.object.text }}
</td>
<td data-title="'Sentimento'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(1)">
<select title="Selecionar" ng-model="batchUserCtrl.bla" selectpicker data-live-search="true" id="teste">
<option>1</option>
<option>2</option>
</select>
</td>
<td data-title="'Tema'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(2)">
{{ batchUserCtrl.getValue(classification.category_values, 2).val }}
</td>
<td data-title="'Manifestação'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(4)">
manif
</td>
<td data-title="'Complemento 1'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(5)">
{{ batchUserCtrl.getValue(classification.category_values, 5).val }}
</td>
<td data-title="'Outros'" class="vert-align col-sm-1">
{{classification.others}}
</td>
<td data-title="'Lixo'" class="vert-align col-sm-1">
{{classification.garbagePretty}}
</td>
</tr>
</table>
</div>
In the third column I created only one selectpicker with fixed options, but when the page is rendered there are 2 dropdowns, instead of one:
And only the upper one works, which means that the user can select an option, the other one shows the options and even let the user choose one of them, but doesn't change the selected option text. If I put the same <select>
tag outside the table it works ok.
Here's the HTML code of the selectpickers after the page is fully rendered:
<td data-title="'Sentimento'" class="vert-align col-sm-1 ng-scope" ng-if="batchUserCtrl.controlColumnsVisibility(1)" data-title-text="Sentimento">
<!--{{ batchUserCtrl.getValue(classification.category_values, 1).val }}-->
<select title="Selecionar" ng-model="batchUserCtrl.bla" selectpicker="" data-live-search="true" id="teste" class="bs-select-hidden ng-untouched ng-valid ng-dirty ng-valid-parse"><option class="bs-title-option" value="">Selecionar</option>
<!--2-->
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="btn-group bootstrap-select ng-pristine ng-untouched ng-valid ng-dirty ng-valid-parse">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="teste" title="2" aria-expanded="false">
<span class="filter-option pull-left">2</span> <span class="caret">
</span>
</button>
<div class="dropdown-menu open" style="max-height: 141px; overflow: hidden; min-height: 42px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off">
</div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 87px; overflow-y: auto; min-height: 0px;">
<li data-original-index="1" class="">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">1</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
<li data-original-index="2" class="selected active">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">2</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="teste" title="Selecionar" aria-expanded="false">
<span class="filter-option pull-left">Selecionar</span> <span class="caret"></span>
</button>
<div class="dropdown-menu open">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off">
</div>
<ul class="dropdown-menu inner" role="menu">
<li data-original-index="1" class="active">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">1</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
<li data-original-index="2">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">2</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
</td>
Can someone please help?
Thanks!
Metadata
Metadata
Assignees
Labels
No labels