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>