Input Groups

Place one add-on or button on either side of an input.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Include Icon Support Files in Logi Info Application Include Icon Support Files in Logi Info Application
Include Bootstrap in Logi Info Application x
Logi XML
<StyleSheet StyleSheet="Fonts.combined.css" />
<StyleSheet StyleSheet="Fonts.combined.css" />
Download interrupted? Click here to start download.

Add `text`, `buttons`, `icons` or `dropdowns` to any form control.

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

Alignment

Icon left positioned

Icon right positioned

<Division Class="input-group" HtmlDiv="True" ID="input-group">
  <Division Class="input-group-prepend" HtmlDiv="True">
    <Division Class="input-group-text" HtmlDiv="True">
      <Label Class="fa fa-search" HtmlTag="I" />
    </Division>
  </Division>
  <InputText Class="form-control" ID="inpText" />
</Division>
<Division Class="input-group" HtmlDiv="True" ID="input-group">
  <InputText Class="form-control" ID="inpText" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="input-group-text" HtmlDiv="True">
      <Label Class="fa fa-search" HtmlTag="I" />
    </Division>
  </Division>
</Division>

Sizes

Input Group Large

Input Group Default

Input Group Small

<Division Class="input-group input-group-lg" HtmlDiv="True" ID="btnInpGrLg">
  <InputText Class="form-control" ID="inpText" Placeholder="Display Large Inputs" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="input-group-text" HtmlDiv="True">
      <Label Class="fa fa-search" HtmlTag="I" />
    </Division>
  </Division>
</Division>
<Division Class="input-group" HtmlDiv="True" ID="btnInpGrDefault">
  <InputText Class="form-control" ID="inpText" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="input-group-text" HtmlDiv="True">
      <Label Class="fa fa-search" HtmlTag="I" />
    </Division>
  </Division>
</Division>
<Division Class="input-group input-group-sm" HtmlDiv="True" ID="btnInpGrSm">
  <InputText Class="form-control" ID="inpText" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="input-group-text" HtmlDiv="True">
      <Label Class="fa fa-search" HtmlTag="I" />
    </Division>
  </Division>
</Division>

Logi Input Date Picker

Example

<Division Class="input-group" HtmlDiv="True">
   <InputDate 
      Class="form-control input-date" 
      CalendarLinkType="Text" 
      CalendarLink=" " />
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$('.input-date').each(function() {
	$(this).siblings('a').addClass('fa fa-calendar').wrap('<div class=\'input-group-text input-group-append\'></div>').parent().appendTo($(this).closest('.input-group'));
});
/*...END INCLUDE SCRIPT*/

<Division Class="input-group" HtmlDiv="True"> <InputDate CalendarLink=" " CalendarLinkType="Text" Class="form-control input-date" DefaultValue="" Format="MM/dd/yyyy" ID="dpDate" Placeholder="Date Selector" /> </Division><IncludeScript IncludedScript="$(document).ready(function() {
 $('.input-date').each(function() {
 $(this).siblings('a').addClass('fa fa-calendar').wrap('<div class=\'input-group-text input-group-append\'></div>').parent().appendTo($(this).closest('.input-group'));
 });
});
" />

Actions

Button action

Buttons with dropdown

<Division Class="input-group" HtmlDiv="True" ID="inpGrpBtnAction">
  <InputText Class="form-control" ID="inpText" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Label Caption="Search" Class="btn btn-primary">
      <EventHandler DhtmlEvent="onclick">
        <Action ID="actJS" Javascript="alert('Clicked!')" Type="Javascript" />
      </EventHandler>
    </Label>
  </Division>
</Division>

<Division Class="input-group" HtmlDiv="True" ID="inpGrpButtonsWithDropdown">
  <Division Class="input-group-prepend" HtmlDiv="True" IdeDisplayStatus="Collapsed">
    <Division Class="btn btn-secondary dropdown-toggle" IdeDisplayStatus="Collapsed">
      <Label Caption="Dropdown" />
    </Division>
    <Division Class="dropdown-menu" HtmlDiv="True" IdeDisplayStatus="Collapsed">
      <Label Caption="Action" Class="dropdown-item" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0);" Type="Javascript" />
        </EventHandler>
      </Label>
      <Label Caption="Something else here" Class="dropdown-item" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0);" Type="Javascript" />
        </EventHandler>
      </Label>
      <Division Class="dropdown-divider" HtmlDiv="True" />
      <Label Caption="Separated link" Class="dropdown-item" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0);" Type="Javascript" />
        </EventHandler>
      </Label>
    </Division>
  </Division>
  <InputText Class="form-control" ID="inpText" />
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$('.dropdown-toggle:not([attr=\'data-toggle\'])').attr('data-toggle', 'dropdown');
/*...END INCLUDE SCRIPT*/

Input Groups

How To

Add text, buttons, icons or dropdowns to any form control.

Add `text`, `buttons`, `icons` or `dropdowns` to any form control.