selectizeInput() box slightly taller than rest - r

Question

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

Answer 1

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.