Flow layout

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.

Flow 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>
    <label for="rows">How many rows?</label>
    <input id="rows" type="number" value="5"/>
  </div>
  <div>
    <label class="control-label" for="letter">Which letter?</label>
    <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>
      <label class="control-label" for="value">What value?</label>
      <input id="value" type="slider" name="value" value="50" class="jslider" data-from="0" data-to="100" data-step="1" data-skin="plastic" data-round="FALSE" data-locale="us" data-format="#,##0.#####" data-smooth="FALSE"/>
    </div>
  </div>
</div>

See also

verticalLayout