Adaptive placeholder and bootstrap input-group - html

Question

I am trying to use the adaptive placeholder CSS files on my page - it works perfectly for text and select inputs but when I try and use it with bootstraps input-group, it just doesn't work.
I've created a bootply to show what I mean bootply (the middle one is what I want it to look like)
This is the input-group that doesn't take the adaptive placeholder
<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>
and this is an input where it does work
<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>
any help would be greatly appreciated, cheers

Answer 1

Use two divs, col-sm-5 adjust-span-left and col-sm-1 adjust-span-right.
You can also use col-sm-6 to col-sm-11 depending how long you want it to be.
Note I added adjust-span-left and adjust-span-right to the divs respectively, now use CSS to adjust it accordingly:
.adjust-span-right{
margin-left: -40px;
}
/* To make it responsive to smaller screens add this */
#media screen and (max-width: 780px) {
.adjust-span-left{
float:left;
width:90%;
overflow:hidden;
}
.adjust-span-right{
float:left;
width:10%;
overflow:hidden;
}
}
Then use this input
<div class="row">
<div class="col-sm-5 adjust-span-left">
<input id="txtInvoiceNumber" type="text" class="form-control input-sm" runat="server" required="">
<label for="txtInvoiceNumber" placeholder="Invoice Number">
</label>
</div>
<div class="col-sm-1 adjust-span-right">
<span class="input-group-btn">
<button class="btn btn-secondary btn-sm" type="button">
...
</button>
</span>
</div>
</div>
EDIT
I noticed the placeholder doesn't show on the smaller screen on focus, so you should also adjust the css for that in the responsive css style.
Something like:
#media screen and (max-width: 780px) {
input[type="text"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before {
/* Adjust the css accordingly */
-webkit-transform: translate(6px, -10px);
-ms-transform: translate(6px, -10px);
transform: translate(8px, -10px);
}
}