如何自定义多个fillCol的宽度？答案

【问题标题】：How to customize width of multiple fillCol?如何自定义多个fillCol的宽度？
【发布时间】：2023-03-17 12:22:01
【问题描述】：

我正在寻找一种在 UI 中自定义 fillCol 宽度的方法。我想将 Sidebar1 的宽度设置为 20%，Main 设置为 60%，Sidebar2 设置为 20%。我尝试使用% CSS 单位，但它不起作用。

library(shiny)

ui <- fillPage(
   
    fillRow(
            tags$b("Header"), 
            height = "5vh"),
    fillRow(
        fillCol(tags$b("Sidebar1"), width = "10%"),
        fillCol(tags$b("Main"), width = "80%"),
        fillCol(tags$b("Sidebar2"), width = "10%"),
           
            height = "90vh"),
    fillRow(
        tags$b("Footer"), 
        height = "5vh"))
    

server <- function(input, output, session) {
    
}

shinyApp(ui, server)

现在，它们似乎平均分布。

【问题讨论】：

标签： css r shiny

【解决方案1】：

您应该使用flex=c(1,3,1) 来获得 20%、60% 和 20% 的显示，如下所示。

ui <- fillPage(
  
  fillRow(
    tags$b("Header"), height = "5vh"),
  fillRow(flex = c(1,3,1),
    plotOutput("plotLeft",  height = "50%"),
    plotOutput("plotMiddle", height = "50%"),
    plotOutput("plotRight",  height = "50%") , height = "90vh"
    ),
  fillRow(
    tags$b("Footer"), 
    height = "5vh"))


server <- function(input, output, session) {
  output$plotLeft <- renderPlot(plot(cars))
  output$plotMiddle <- renderPlot(plot(pressure))
  output$plotRight <- renderPlot(plot(AirPassengers))
}

shinyApp(ui, server)

【讨论】：