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:

enter image description here

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

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -