html - Bootstrap Input Group Horizontal Align Issue -
i'm trying create input field button addon appended, i've copied code bootstrap documentation input field , button seem have opposite horizontal alignments. i've had @ applied styles in chrome developer tools cab't figure out what's going on.
here code snippet:
<div class="panel-heading">checkins on @viewbag.qrydate</div> <div class="panel-body"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">date:</div> <input type="date" class="form-control" id="exampleinputamount" placeholder="@viewbag.qrydate"> <span class="input-group-btn"> <button class="btn btn-default" type="button">go!</button> </span> </div> </div> </div>
the image below shows problem:
i using asp.net mvc 5 site has bootstrap 3 baked in, haven't added additional css or js. have replaced bootstrap 3 files latest ones available see if bug hasn't made difference.
i have wrapped .input-group in .form-group suggested in question.
the issue can replicated in chrome , ie 11. being muppet? ideas i've missed? many thanks.
thanks suggestions guys - after further investigation following default style included in asp.net mvc 5 site.css causing problem:
/* set width on form input elements since they're 100% wide default */ input, select, textarea { max-width: 280px; }
Comments
Post a Comment