【问题标题】:R Shiny - Decrease space between elements in columnR Shiny - 减少列中元素之间的空间
【发布时间】:2020-12-22 14:37:24
【问题描述】:

我有以下可重现的代码:

library(shiny)

ui <- fluidPage(
  fluidRow(
    column(3, align="left",
           # Input: Quantile ----
           selectInput(inputId = "TEST",
                       label = "",choices = c(80, 85, 90, 95),selected = 90),
    ),
    
    column(9,
           tabsetPanel(
             tabPanel("Table 1"),
             tabPanel("Figures 1"),
             tabPanel("Figures 2"),
             tabPanel("Figures 3",
                      fluidRow(
                        fluidRow(
                          column(width = 3,
                                 wellPanel(
                                   tags$head(tags$style(type="text/css", "#loadmessage {
                                                                          position: fixed;
                                                                          top: 0px;
                                                                          left: 500px;
                                                                          width: 60%;
                                                                          padding: 5px 0px 5px 0px;
                                                                          text-align: center;
                                                                          font-weight: bold;
                                                                          font-size: 100%;
                                                                          color: #000000;
                                                                          background-color: #DAF7A6;
                                                                          z-index: 105;
                                                                           }")),
                                   conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                                                    tags$div("Chargement...",id="loadmessage")),
                                   selectInput(inputId="CartesFig",
                                               label="",
                                               choices= c("1.Carac", "2.Rangs", "3.Comparaison")),
                                   selectInput(inputId="TypeVisu",
                                               label="",
                                               choices= c("Séparation", "Tout")),
                                   actionButton("GraphCartes", "Go !",
                                                style="color: #fff; background-color: #337ab7; border-color: #2e6da4")
                                 )),
                          column(1,
                                 conditionalPanel(
                                   condition = ("input.CartesFig == '3.Comparaison'"),
                                   selectInput(inputId = "Nb_Compa", label = "Nombre", choices = c(1,2,3), selected = 1),
                                 )),
                          column(2, 
                                 conditionalPanel(
                                   condition = ("input.CartesFig == '3.Comparaison'"),
                                   wellPanel(
                                     conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 1 || input.Nb_Compa == 2 || input.Nb_Compa == 3)",
                                                      selectInput(inputId = "Comparatif1", label = "", choices = "placeholder1")),
                                     conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 2 || input.Nb_Compa == 3)",
                                                      selectInput(inputId = "Comparatif2", label = "", choices = "placeholder1")),
                                     conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 3)",
                                                      selectInput(inputId = "Comparatif3", label = "", choices = "placeholder1")))
                                 )),
                          column(3, align="center",
                                 actionButton("DownloadCartes", "Télécharger la figure",style="Gradient"))),
                        tags$style(type='text/css', "#DownloadCartes { width:60%; margin-top: 40px;}"),
                        mainPanel(plotOutput("CartesPlot", height="700px", width="1300px")))
             ) ##Tab Panel Fig 3
           ) ##tabSetPanel
    ) ##Column
  ) ## FluidRow
) # fluidPage

server <- function(input, output, session) {
  Input_Nb_compa <- reactive({input$Nb_Compa})
  
  observeEvent(input$Nb_Compa,{
    if(Input_Nb_compa()==1) {updateSelectInput(session, "Comparatif1", choices =(1:1500), selected = 1226)}
    if(Input_Nb_compa()==2) {
      updateSelectInput(session, "Comparatif1", choices = (1:1500), selected = 1226)
      updateSelectInput(session, "Comparatif2", choices = (1:1500), selected = 789)}
    if(Input_Nb_compa()==3) {
      updateSelectInput(session, "Comparatif1", choices = (1:1500), selected = 1226)
      updateSelectInput(session, "Comparatif2", choices = (1:1500), selected = 789)
      updateSelectInput(session, "Comparatif3", choices = (1:1500), selected = 20)}
  })
  
  output$CartesPlot <- renderPlot({NULL})
}

shinyApp(ui, server)

产生如下界面:

如图中以红色绘制的那样,我正在尝试减少元素“Comparatif1”、“Comparatif2”和“Comparatif3”之间的空间,因为知道它们的出现取决于 Nb_Compa 的值。最终目标是让 WellPanel 的大小与第一列中的第一个相同。我添加了代码的完整性,因为当 Shiny 很忙时,我会出现一个加载栏。我已经阅读了很多关于“div(pattern=0px)”、“offset”等的内容,但我不确定它是否适用于我的情况,因为它不在列/行之间,而是在列内。

感谢您的帮助!

【问题讨论】:

    标签: css r shiny


    【解决方案1】:

    在您的情况下,label = NULL 应该删除标签的额外空间。

                               conditionalPanel(condition="$('html').hasClass('shiny-busy')",
                                                tags$div("Chargement...",id="loadmessage")),
                               selectInput(inputId="CartesFig",
                                           label="",
                                           choices= c("1.Carac", "2.Rangs", "3.Comparaison")),
                               selectInput(inputId="TypeVisu",
                                           label=NULL,
                                           choices= c("Séparation", "Tout")),
                               actionButton("GraphCartes", "Go !",
                                            style="color: #fff; background-color: #337ab7; border-color: #2e6da4")
                             )),
                      column(1,
                             conditionalPanel(
                               condition = ("input.CartesFig == '3.Comparaison'"),
                               selectInput(inputId = "Nb_Compa", label = "Nombre", choices = c(1,2,3), selected = 1),
                             )),
                      column(2,
                             conditionalPanel(
                               condition = ("input.CartesFig == '3.Comparaison'"),
                               wellPanel(
                                 conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 1 || input.Nb_Compa == 2 || input.Nb_Compa == 3)",
                                                  selectInput(inputId = "Comparatif1", label = NULL, choices = "placeholder1")),
                                 conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 2 || input.Nb_Compa == 3)",
                                                  selectInput(inputId = "Comparatif2", label = NULL, choices = "placeholder1")),
                                 conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 3)",
                                                  selectInput(inputId = "Comparatif3", label = NULL, choices = "placeholder1")))
                             ))
    

    【讨论】: