css - Responsive segmented dropdown group with block level input -


i'am using bootstrap framework develop responsive hotel search page. need segmented dropdown group block level input shown in below image.

sample image need

here, input full width, floated left action dropdown. text "action" dynamic , change according user selects dropdown. width of dropdown may increase.

the input text should start left dropdown , fits full width also.

i managed static, there lot of issues faced width when doing responsive , when dropdown text increased.

does have idea how implement ?

advanced help..

edit : here js fiddle : http://jsfiddle.net/surjithctly/mp8ab/

html

<form class="bs-docs-example">             <div class="input-prepend">               <div class="btn-group" style="     z-index: 1; ">                 <button class="btn" tabindex="-1">action</button>                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">                   <span class="caret"></span>                 </button>                 <ul class="dropdown-menu">                   <li><a href="#">action</a></li>                   <li><a href="#">another action</a></li>                   <li><a href="#">something else here</a></li>                   <li class="divider"></li>                   <li><a href="#">separated link</a></li>                 </ul>               </div>               <input type="text" class="input-block-level">             </div>            </form> 


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -