在 R 中定位闪亮的小部件，如 box 和 selectInput答案

【问题标题】：Positioning of shiny widets like box and selectInputs in R在 R 中定位闪亮的小部件，如 box 和 selectInput
【发布时间】：2018-05-25 19:56:34
【问题描述】：

请运行下面的 R shiny 脚本，我将附上两个屏幕，需要一些帮助来定位小部件：

屏幕 1：

我想增加 selectInput 小部件的宽度，以便在 KPI 框的间距相等的情况下，选项清晰可见。
我希望两个大框具有相同的宽度和高度，以便从左到右完全覆盖屏幕。

注意：框的左边框应该与 selectInput 小部件的左边框重合。

屏幕 2： 1. 请帮助移动第一个和第二个 selectInput 小部件，以及上面的 kpi 框，以便可以像上面屏幕中的要求一样增加箱形图的宽度。请帮忙。

## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Iris Chart"),
dashboardSidebar(
width = 0
),
dashboardBody(
tags$head(tags$style(HTML('.info-box {min-height: 45px;} .info-box-icon 
{height: 45px; line-height: 45px;} .info-box-content {padding-top: 0px; 
padding-bottom: 0px;} 
                          '))),
fluidRow(
  column(1,
  selectInput("Position", "", 
  c("User_Analyses","User_Activity_Analyses"),selected = "Median", width = 
  "400"),
  conditionalPanel(
  condition = "input.Position == 'User_Analyses'",
  selectInput("stats", "", c("Time","Cases"),selected = "Median", width = 
  "400"))),
  tags$br(),
  column(10,
  infoBox("User1", paste0(10), icon = icon("credit-card"), width = "3"),
         infoBox("User2",paste0(10), icon = icon("credit-card"), width = 
  "3"),

         infoBox("User3",paste0(10), icon = icon("credit-card"), width = 
  "3"),
         infoBox("User4",paste0(16), icon = icon("credit-card"), width = 
  "3")),


  column(10,
         conditionalPanel(
           condition = "input.Position == 'User_Analyses'",

           box(title = "Plot1", status = "primary",height = "537" ,solidHeader = T,
               plotOutput("case_hist",height = "466")),
           box(title = "Plot2", status = "primary",height = "537" ,solidHeader = T,
               plotOutput("trace_hist",height = "466"))


         ),
         conditionalPanel(
           condition = "input.Position == 'User_Activity_Analyses'",
           box(title = "Plot3",status = "primary",solidHeader = T,height = "537",width = "6",
               plotOutput("sankey_plot")),
           box(title = "Plot4",status = "primary",solidHeader = T,height = "537",width = "6",
               plotOutput("sankey_table"))

           )





  )

)



)
)
server <- function(input, output) 
{
output$case_hist <- renderPlot(
plot(iris$Sepal.Length)

)

output$trace_hist <- renderPlot(
plot(mtcars$mpg)

)
output$sankey_plot <- renderPlot({
plot(diamonds$carat)
})
#Plot for Sankey Data table 
output$sankey_table <- renderPlot({
plot(iris$Petal.Length)
})
}
shinyApp(ui, server)

【问题讨论】：

标签： html css r shiny shinydashboard

【解决方案1】：

这有点你想要的吗？

library(shiny)
library(shinydashboard)
ui <- dashboardPage(
  dashboardHeader(title = "Iris Chart"),
  dashboardSidebar(
    width = 0
  ),
  dashboardBody(
    tags$head(tags$style(HTML('.info-box {min-height: 45px;} .info-box-icon 
                              {height: 45px; line-height: 45px;} .info-box-content {padding-top: 0px; 
                              padding-bottom: 0px;} 
                              '))),
    fluidRow(
      column(
        width = 12,
        column(
          width = 2,
          selectInput("Position", "", 
                      c("User_Analyses","User_Activity_Analyses"),selected = "Median", width = 
                        "400"),
          conditionalPanel(
            condition = "input.Position == 'User_Analyses'",
            style = "margin-top:-22px;",
            selectInput("stats", "", c("Time","Cases"),selected = "Median", width = "400"))
        ),
        column(
          style = "padding-top:20px;",
          width = 10,
          infoBox("User1", paste0(10), icon = icon("credit-card"), width = "3"),
          infoBox("User2",paste0(10), icon = icon("credit-card"), width ="3"),

          infoBox("User3",paste0(10), icon = icon("credit-card"), width ="3"),
          infoBox("User4",paste0(16), icon = icon("credit-card"), width ="3"))
        ),
      column(
        width = 12,
        conditionalPanel(
          condition = "input.Position == 'User_Analyses'",
          box(title = "Plot1", status = "primary",height = "537" ,solidHeader = T,
              plotOutput("case_hist",height = "466")),
          box(title = "Plot2", status = "primary",height = "537" ,solidHeader = T,
              plotOutput("trace_hist",height = "466"))
        ),
        conditionalPanel(
          condition = "input.Position == 'User_Activity_Analyses'",
          box(title = "Plot3",status = "primary",solidHeader = T,height = "537",width = "6",
              plotOutput("sankey_plot")),
          box(title = "Plot4",status = "primary",solidHeader = T,height = "537",width = "6",
              plotOutput("sankey_table"))
        )      
      )
    )
    )
    )
server <- function(input, output) 
{
  output$case_hist <- renderPlot(
    plot(iris$Sepal.Length)

  )

  output$trace_hist <- renderPlot(
    plot(mtcars$mpg)

  )
  output$sankey_plot <- renderPlot({
    plot(diamonds$carat)
  })
  #Plot for Sankey Data table 
  output$sankey_table <- renderPlot({
    plot(iris$Petal.Length)
  })
}
shinyApp(ui, server)

【讨论】：

如果你想要的话，我会更详细地解释它。
首先，非常感谢您在这里帮助我，我真的很感谢您的努力，只是，带有 selectinput 小部件的四个 KPI 框（宽度越小越好），可以自己排成一行，这样两个大框就可以显示更多的内容。请在此处帮助调整大小。
完美先生，一个小的变化，当我选择 User_Analyses 选项时，如果你可以减少两个 selectInputs 之间的小空间。很好很好的帮助。
OK 在条件面板中添加了一个负边距顶部以节省一些空间。已更新代码
我上面还有一个要求，你能不能帮我缩小两个大盒子之间的空间，我不希望边界之间有空间。