css - aligning variable numbers of textInputs in shiny

Question

I'm trying to place a button next to a textinput in Shiny. The amount of textInput and buttons vary with the amount of columns of an input dataframe.

I am having trouble aligning them properly. I put each textInput and button in a div, with display:inline-block, but each div ends up aligning vertically instead of horizontally. I think it has something to do with margin/padding, I tried setting them to zero but it did not fix the issue.

Example app:

library(shiny)
ui <- fluidPage(
  tagList(
    fluidRow(
        div(
            shiny::uiOutput("elements")
            ,style="display: inline-block;vertical-align:top; width: 100%;"
        )
    )
  )
)
server <- function(input, output, session) {
  df = data.frame(
      company = c('a', 'b', 'c', 'd'),
      bond = c(0.2, 1, 0.3, 0),
      equity = c(0.7, 0, 0.5, 1),
      cash = c(0.1, 0, 0.2, 0),
      stringsAsFactors = FALSE
  )
  output$elements <- renderUI({
      # Initialize list of inputs
      inputTagList <- tagList()
      # Define unique input id and label
      for(i in seq(ncol(df))){
          # sort id
          txtId <- names(df)[i]
          buttonId <- paste0("button-", names(df)[i])
          newInput <- div(
            textInput(inputId = txtId, label = "", valu = "", "80%")
            ,actionButton(id, "up", class = "btn-primary", style="width:20%")
            ,style="display: inline-block;vertical-align:top; width:20px;"
          )
          # Append new input to list of existing inputs
          inputTagList <- tagAppendChild(inputTagList, newInput)
      }
      # Return updated list of inputs
      inputTagList
  })
}
shinyApp(ui, server)

question from:https://stackoverflow.com/questions/65834638/aligning-variable-numbers-of-textinputs-in-shiny

Answer 1

You can use display: flex:

  newInput <- div(
    textInput(inputId = txtId, label = NULL, value = "", width = "80%")
    ,actionButton(buttonId, "up", class = "btn-primary", style="width:20%")
    ,style="display: flex; align-items: flex-start; width: 400px;"
  )