Bootstrap input-group, fixed width button - html

Question

I have an input-group as follow:
<div class="input-group" style="width:100%;"> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-primary" onclick="CaptureMapLocation('DependentRelation','0');" role="button"><i class="fa fa-map-marker"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-search"></i></a> </div> <div class="input-group-btn"> <a style="padding-left: 0px;padding-right: 0px;" class="form-control btn btn-default disabled" role="button"><i class="fa fa-remove"></i></a> </div> </div>
I need the last button to have a fixed width, how to do that?

Answer 1

You can achieve this with CSS - the following will target the input group button that is the last child of the input group and apply a width to it.
You should move all your inline styling to a separate (external) CSS sheet which will make the code cleaner and easier to read.
Note the following will apply to all input group buttons in your page so you might want to apply a specific class or id to the parent input group div.
.input-group-btn:last-child {
width: 100px; // or whatever your desired width is
}
You can also do this with flex
.input-group {
display: flex;
}
.input-group-btn {
flex-grow:1;
}
.input-group-btn:last-child {
flex-grow: 0;
flex: shrink:0;
flex-basis: 100px; // or whatever your desired width is
}
If you want to apply the fixed witdh to the second button then it would be
.input-group-btn:nth-child(2){
width: 100px; // or whatever your desired width is
}
Ultimately - if any button could be afffected - you could create a "fixed-width-class" and apply it to the button / s you want affected.
.input-group-btn.fixed-width {
width: 100px; // or whatever your desired width is
}