html - How to set bootstrap input responsive width? -
i need inline form calendar in both fields. reason can't rid of space between text , borders of input... here picture of problem
i've tried set width parent div , input itself.... no good..
here i've done far. fiddle:
<div class="modify_search"> <div class="search_wrapper"> <div class="search_header"> <form class="form-inline"> <div class="left"> <span>du</span> <div class="input-group"> <input type="text" class="form-control search_input" id="inlineforminputgroup"> <div class="input-group-addon"> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> </div> <div class="right"> <span>du</span> <div class="input-group"> <input type="text" class="form-control search_input" id="inlineforminputgroup"> <div class="input-group-addon"> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> </div> </form> </div> </div> </div> here css :
.search_input { border: none; outline: none; font-size: 24px; box-shadow: none; } .search_input:focus { box-shadow: none; } .modify_search { overflow: hidden; position: absolute; background-color: white; width: 60vw; height: 37vh; left: 50%; bottom: 5%; transform: translate(-50%, 0%); border-radius: 10px; -webkit-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 28px -5px rgba(0, 0, 0, 0.75); } .left, .right { margin-right: 15px; border-bottom: 1px solid grey; } .left { float: left; } .right { float: right; } .search_header { padding: 15px 15px 0px 15px; } .input-group-addon { background-color: white; border: none; }
as you're using bootstrap have apply witdh input-group if have input-group diferent width, add id parent div , filter css class id
#less-width .input-group{ width: 180px !important; } http://jsfiddle.net/duj0s5ev/8/
or can add bootstrap column fills desired width
Comments
Post a Comment