Why do buttons stay on the same row but textInputs do not?

Question

I want the buttons and the textinputs to be on the same row. The buttons stay on the same row but the textInputs go on new rows. I can't see why.

ui  =   fluidPage(
    textInput("ti1", "TI1"),
    actionButton("Button1", "B1"),
    actionButton("Button2", "B2"),
    textInput("ti2", "TI2")
)

server <- function(input, output) {}

shinyApp(ui= ui, server=server)

Answer 1

As shown below, textInput() wraps its output in an HTML div element while actionButton does not. The default behavior of div elements is to visually isolate their contents, here by, in effect, adding a line break before and after the element, which is what you are seeing.

textInput("ti1", "TI1")
## <div class="form-group shiny-input-container">
##   <label for="ti1">TI1</label>
##   <input id="ti1" type="text" class="form-control" value=""/>
## </div>

actionButton("Button1", "B1")
##  <button id="Button1" type="button" class="btn btn-default action-button">B1</button>

If you'd like to have several text inputs on one line (and/or several action buttons each on their own lines) you can do so using the functions fluidRow() and column(), like so:

ui <- fluidPage(
    fluidRow(
        column(width = 4,
               textInput("ti2", "TI2")),
        column(width = 4,
               textInput("ti1", "TI1"))
    ),
    fluidRow(actionButton("Button1", "B1")),
    fluidRow(actionButton("Button2", "B2"))
)

server <- function(input, output) {}

shinyApp(ui= ui, server=server)