flowLayout

flowLayout(..., cellArgs = list())

Arguments

...	Unnamed arguments will become child elements of the layout. Named arguments will become HTML attributes on the outermost tag.
cellArgs	Any additional attributes that should be used for each cell of the layout.

Description

Lays out elements in a left-to-right, top-to-bottom arrangement. The elements on a given row will be top-aligned with each other. This layout will not work well with elements that have a percentage-based width (e.g. plotOutput at its default setting of width = "100%").

Examples

flowLayout(
  numericInput("rows", "How many rows?", 5),
  selectInput("letter", "Which letter?", LETTERS),
  sliderInput("value", "What value?", 0, 100, 50)
)
<div class="shiny-flow-layout">
  <div>
    <div class="form-group shiny-input-container">
      <label for="rows">How many rows?</label>
      <input id="rows" type="number" class="form-control" value="5"/>
    </div>
  </div>
  <div>
    <div class="form-group shiny-input-container">
      <label class="control-label" for="letter">Which letter?</label>
      <div>
        <select id="letter"><option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option></select>
        <script type="application/json" data-for="letter" data-nonempty="">{}</script>
      </div>
    </div>
  </div>
  <div>
    <div class="form-group shiny-input-container">
      <label class="control-label" for="value">What value?</label>
      <input class="js-range-slider" id="value" data-min="0" data-max="100" data-from="50" data-step="1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="1" data-drag-interval="true" data-data-type="number"/>
    </div>
  </div>
</div>

See also

verticalLayout