R Shiny - Decrease space between elements in column

Question

I have the following reproducible code:

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)

Producing the following interface:

As drawn in red in the figure, I am trying to reduce space between the elements "Comparatif1", "Comparatif2" and "Comparatif3", knowing that they appear depending on the value of Nb_Compa. The ultimate goal is to have the same size of WellPanel than the first one in the first column. I added the integrality of my code, as I have a loading bar appearing when Shiny is busy. I've read many things on "div(pattern=0px)", "offset", etc. but I am not sure it works for my case as it it not between columns/rows but inside a column.

Thanks for the help !

Answer 1

In your case, label = NULL should remove the extra space for label.

                           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")))
                         ))