splitLayout

splitLayout(..., cellWidths = NULL, cellArgs = list())

Arguments

...	Unnamed arguments will become child elements of the layout. Named arguments will become HTML attributes on the outermost tag.
cellWidths	Character or numeric vector indicating the widths of the individual cells. Recycling will be used if needed. Character values will be interpreted as CSS lengths (see validateCssUnit), numeric values as pixels.
cellArgs	Any additional attributes that should be used for each cell of the layout.

Description

Lays out elements horizontally, dividing the available horizontal space into equal parts (by default).

Examples

# Equal sizing
splitLayout(
  plotOutput("plot1"),
  plotOutput("plot2")
)
<div class="shiny-split-layout">
  <div style="width: 50.000%;">
    <div id="plot1" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
  <div style="width: 50.000%;">
    <div id="plot2" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
</div>


# Custom widths
splitLayout(cellWidths = c("25%", "75%"),
  plotOutput("plot1"),
  plotOutput("plot2")
)
<div class="shiny-split-layout">
  <div style="width: 25%;">
    <div id="plot1" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
  <div style="width: 75%;">
    <div id="plot2" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
</div>


# All cells at 300 pixels wide, with cell padding
# and a border around everything
splitLayout(
  style = "border: 1px solid silver;",
  cellWidths = 300,
  cellArgs = list(style = "padding: 6px"),
  plotOutput("plot1"),
  plotOutput("plot2"),
  plotOutput("plot3")
)
<div class="shiny-split-layout" style="border: 1px solid silver;">
  <div style="width: 300px; padding: 6px">
    <div id="plot1" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
  <div style="width: 300px; padding: 6px">
    <div id="plot2" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
  <div style="width: 300px; padding: 6px">
    <div id="plot3" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
  </div>
</div>