fuelux/templates/underscore/bootstrap/input-with-button-dropdown.html

Base Fuel UX styles and controls

<!-- Button Drop Down http://getbootstrap.com/components/#input-groups-buttons-dropdowns -->
<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %>">
  <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>Input"><%= label %></label>
  <% if(horizontal) {%><div class="col-sm-10"><% } %>
    <div class="input-group<% if(inputsize.length > 0) {%> input-group-<%= inputsize %><% } %>" id="<%= id %>">
      <% if(placement=="appended") { %><input id="<%= id %>Input" name="<%= id %>Input" type="<%= inputtype %>" class="form-control<% if(!horizontal && inputsize.length > 0) {%> input-<%= inputsize %><% } %>" placeholder="<%= placeholder %>" aria-label=""<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>/><% } %>
      <div class="input-group-btn">
        <button type="button" class="btn <%= buttonstyle %> dropdown-toggle<% if(inputsize.length > 0) {%> btn-<%= inputsize %><% } %>" data-toggle="dropdown" aria-label="<%= label %> related options" aria-haspopup="true" aria-expanded="false"<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>><%= buttontext %>&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu<% if(placement=="appended") { %> dropdown-menu-right<% } %>"><% _.each(buttonoptions, function(value) { %>
          <li><a href="#"><%= value %></a></li><% }); %>
        </ul>
      </div><!-- /btn-group -->
      <% if(placement=="prepended") { %><input id="<%= id %>Input" name="<%= id %>Input" type="<%= inputtype %>" class="form-control<% if(!horizontal && inputsize.length > 0) {%> input-<%= inputsize %><% } %>" placeholder="<%= placeholder %>" aria-label=""<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>/><% } %>
    </div><!-- /input-group -->
  <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
  <% if(horizontal) {%></div><% } %>
</div>