Currently, I am utilizing the bootstrap datepicker from , and it functions perfectly when accessed via a desktop browser. Additionally, my project incorporates AngularJS.
The snippet of code in question is as follows:
<div class="form-group" ng-repeat="spec in specs">
<label class="control-label">{{spec.SpecName}}</label>
<select ng-change="getBuyPrice(false)" class="form-control selectpicker"
ng-model="selectedSpec[$index]" data-live-search="true">
<option value="">-- Select {{spec.SpecName}} --</option>
<option ng-repeat="value in spec.Values" value="{{value.ID}}">
{{value.Value}}
</option>
</select>
</div>
When viewed on a desktop browser, everything appears to be functioning correctly without any bugs present. https://i.sstatic.net/U404Q.png
However, upon switching to a mobile device for browsing purposes, an issue arises where duplicate select picker elements are displayed.
https://i.sstatic.net/YQFP0.jpg
Specifically, the Spec (Color) section is replicated twice on the mobile browser interface. Despite attempting different mobile browsers, the duplicated entry persists. Even employing the Chrome debugger while emulating a mobile device shows no issues.
If anyone has insight or suggestions for resolving this duplication problem on mobile devices, your assistance would be greatly appreciated.