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.
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>