Shiny column formatting issue

Question

I am trying to horizontally align an actionButton with a textInput field.

Since the "next_question" actionButton and the "correct" textInput field are in the same fluidRow I thought they would be horizontally aligned. They are not.

Also, I thought choosing a higher column number for the "yup" box would move it further to the right. Again, not the case.

What am I missing?

library(shiny)

shinyApp(
  ui = fluidPage(

    sidebarLayout(
      sidebarPanel(

        textInput("answer", width = "50px", label = "Answer"),

        fluidRow(  
          column(2, actionButton(inputId = "next_question", label = "Next")),
          column(8, textInput(inputId = "correct", width = 30, label = "yup"))
        )
      ),

      mainPanel(
        # Equation
        textOutput("equation")
      ))),

  server = function(input, output, session){}
)

amrrs amrrs · Accepted Answer · 2018-09-10T03:50:04

The solution is to add a small css to display:inline-block.

library(shiny)

shinyApp(
  ui = fluidPage(

    sidebarLayout(
      sidebarPanel(

        textInput("answer", width = "50px", label = "Answer"),

        fluidRow(  


                 actionButton(inputId = "next_question", label = "Next"),
                 tags$div(textInput(inputId = "correct", label = "yup"), style = "display:inline-block")

        )
      ),

      mainPanel(
        # Equation
        textOutput("equation")
      ))),

  server = function(input, output, session){}
)

Reference: https://www.w3schools.com/Css/tryit.asp?filename=trycss_inline-block_nav

Shiny column formatting issue

1 Answers