I'm currently experimenting with the adaptive placeholder CSS files on my webpage. It seems to work flawlessly for text and select inputs, but I'm encountering an issue when trying to integrate it with Bootstrap's input-group feature.
To better illustrate my problem, I've set up a bootply demo showcasing the discrepancy here (the middle example represents my desired outcome) https://i.sstatic.net/YuqUC.png
The input-group section that struggles with the adaptive placeholder looks like this:
<div class="row">
<div class="col-sm-6">
<div id="divSupplierInput2" class="input-group">
<input class="form-control" type="text" id="Text2" name="txtSupplier" value="" runat="server"
required="">
<label for="txtSupplier" placeholder="Supplier">
</label>
<span class="input-group-btn">
<button class="btn btn-secondary btn-sm" type="button">
...</button>
</span>
</div>
</div>
</div>
In contrast, here is an input field where the adaptive placeholder works successfully:
<div class="row">
<div class="col-sm-6">
<input id="Text1" type="text" class="form-control input-sm" runat="server" required="">
<label for="txtInvoiceNumber" placeholder="Invoice Number">
</label>
</div>
I would really appreciate any assistance in resolving this issue. Thank you.