Octave1 Octave1 - 3 months ago 35
CSS Question

How to position a button in fluidRow column

I'm trying to place a

selectInput
box beside an
actionButton
in a shiny app, using
fluidRow
&
column
arguments. However the button gets placed at the top of its
column
.
Using
text-align:center
in the
div
places the button centre-top in the
column
view. I'd like the
actionButton
to be at the same height as the
selectBox
on its left.

I'm just beginning to get into some
CSS
because of
Shiny
but am at a loss here.
Thanks in advance :)

ui <- fluidPage(title = "Working Title",

sidebarPanel(width = 6,
# *Input() functions
fluidRow(column(6, selectInput("Input1", label = h3("Select Input 1"), choices = list( "A" = "A", "B" = "B"), selected = 1)),
column(6, div(style = "background-color:yellow; text-align:center;", actionButton("goButtonSetInput1", "SetInput1")))
)
)

)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer

You can do that by adding another fluidRow, and setting the label =NULL

ui <- fluidPage(title = "Working Title",

                sidebarPanel(width = 6,
                             # *Input() functions
                             fluidRow(column(6,  h3("Select Input 1") )), 
                             fluidRow(column(6, selectInput("Input1", label = NULL, choices = list( "A" = "A", "B" = "B"), selected = 1)),
                                      column(6, div(style = "background-color:yellow; text-align:center;", actionButton("goButtonSetInput1", "SetInput1")))
                             )
                )

)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)