控制Fluid的高度R闪亮的行 [英] Control the height in fluidRow in R shiny

问题描述

我正在尝试为shiny应用程序构建布局.我一直在查看应用程序布局指南，并做了一些Google搜索，但似乎闪亮的版式系统有其局限性.

I am trying to build a layout for a shiny app. I have been looking at the application layout guide and did some google search but it seems the layout system in shiny has its limits.

您可以创建以下内容:

fluidPage(
 fluidRow(
  column(6,"Topleft"),
  column(6,"Topright")),
 fluidRow(
  column(6,"Bottomleft"),
  column(6,"Bottomright"))
)

这将为您提供4个相同大小的对象.

This gives you 4 same sized objects.

现在是否可以给2个Top-Objects和Bottom-Objects不同的高度?

Is it possible now to give the 2 Top-Objects a different height as the Bottom-Objects?

是否可以合并Topright-Object和Bottomright-Object?

推荐答案

行的高度是自适应的，由列元素的高度确定.例如，我们在第一行中使用两个元素，分别具有200和100个像素的高度.该行采用其元素的最大高度.第二行分别具有高度为100和150像素的元素，并再次采用最大元素的高度.

The height of the rows is responsive and is determined by the height of the elements of the columns. As an example we use two elements in the first row with heights 200 and 100 pixels respectively. The row takes the maximum height of its elements. The second row has elements with heights 100 and 150 pixels respectively and again takes the height of the largest element.

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
  ),
  server = function(input, output) {
  }
))

为了更好地控制，使用bootstrap之类的库的想法是使用CSS设置元素的样式，例如，我们可以向每行添加一个类，并根据需要设置其高度和其他属性:

For greater control the idea with libraries like bootstrap is that you style your elements with CSS so for example we can add a class to each row and set its height and other attributes as we please:

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(class = "myRow1", 
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(class = "myRow2",
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
    , tags$head(tags$style("
      .myRow1{height:250px;}
      .myRow2{height:350px;background-color: pink;}"
      )
    )
  ),
  server = function(input, output) {
  }
))

我们在此处将样式标签传递给head元素以规定我们的样式.有多种方式可以实现样式，请参见 http://shiny.rstudio.com/articles/css.html

We passed a style tag to the head element here to stipulate our styling. There are a number of ways styling can be achieved see http://shiny.rstudio.com/articles/css.html

这篇关于控制Fluid的高度R闪亮的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！