I ran into a bit of trouble in my app. I have a fluidrow, which contains 2 colums, and these columns again contain fluid rows.

I have a textinput in the left column and a selectInput (with selectize = TRUE) on the right side.

While the contents of that row are on exactly one level, the contents of the next row are sadly pushed further down. This only happens with a selectInput in that location, so I assume that it has a larger margin below than for example a textInput.

I hope somebody had a similar problem an a solution before!

edit:

    fluidRow(
               column(
                 width = 4,
                 offset = 2,
                 h3("Unsere Kontaktdaten"),
                 fluidRow(
                   column(
                     width = 12,
                     disabled(
                       textInput(
                       inputId = "Kontakt",
                       label = "Firma",
                       value = "Digitale Giganten",
                       width = "100%"
                       )
                     ),
                   )
                 ),
                 fluidRow(
                   column(
                     width = 9,
                     disabled(
                       textInput(
                         inputId = "unsere_straße",
                         label = "Straße",
                         value = "Mohnstraße",
                         width = "100%"
                       )
                     ),
                   ),
                   column(
                     width = 3,
                     disabled(
                       textInput(
                         inputId = "unsere_hausnummer",
                         label = "Hausnummer",
                         value = 123,
                         width = "100%"
                       )
                     ),
                   )
                 ),                 
               ),
               column(
                 width = 4,
                 offset = 1,
                 h3("Ansprechpartner"),
                 fluidRow(
                   column(
                     width = 3,
                     disabled(
                       selectInput(
                         inputId = "unsere_anrede",
                         label = "Anrede",
                         choices = c("Herr", "Frau", "Divers"),
                         width = "100%"                       )
                     )
                   ),                    
                   column(
                     width = 9,
                     disabled(
                       textInput(
                         inputId = "unser_ansprechpartner",
                         label = "Ansprechpartner",
                         width = "100%",
                         value = "name"
                       )
                     )
                   )
                 ),
                 disabled(
                   textInput(
                     inputId = "unsere_nummer",
                     label = "Telefon",
                     width = "100%",
                     value = 123456789
                   )
                 ),
               )
             ),

CodePudding user response：

You can fix this via css. I wrapped the selectinput in a div() to style it:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  fluidRow(
    column(
      width = 4,
      offset = 2,
      h3("Unsere Kontaktdaten"),
      fluidRow(
        column(
          width = 12,
          disabled(
            textInput(
              inputId = "Kontakt",
              label = "Firma",
              value = "Digitale Giganten",
              width = "100%"
            )
          ),
        )
      ),
      fluidRow(
        column(
          width = 9,
          disabled(
            textInput(
              inputId = "unsere_straße",
              label = "Straße",
              value = "Mohnstraße",
              width = "100%"
            )
          ),
        ),
        column(
          width = 3,
          disabled(
            textInput(
              inputId = "unsere_hausnummer",
              label = "Hausnummer",
              value = 123,
              width = "100%"
            )
          ),
        )
      ),                 
    ),
    column(
      width = 4,
      offset = 1,
      h3("Ansprechpartner"),
      fluidRow(
        column(
          width = 3,
          disabled(
            div(selectInput(
              inputId = "unsere_anrede",
              label = "Anrede",
              choices = c("Herr", "Frau", "Divers"),
              width = "100%"),
              style = "margin-bottom: -5px;")
          )
        ),                    
        column(
          width = 9,
          disabled(
            textInput(
              inputId = "unser_ansprechpartner",
              label = "Ansprechpartner",
              width = "100%",
              value = "name"
            )
          )
        )
      ),
      disabled(
        textInput(
          inputId = "unsere_nummer",
          label = "Telefon",
          width = "100%",
          value = 123456789
        )
      ),
    )
  )
)

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

shinyApp(ui, server)

If you have multiple selectInputs you need to style and don't want to wrap each in a div, you can add:

  tags$style("
              .selectize-input {
                margin-bottom: -5px !important;
              }
             ")

somewhere in your UI.