How can I align inputs in splitLayout?

Question

I would like to align so that the button is align with the text box and not the header of the text. How can I can do? Additionally, also that the textbox + botton fills up the whole gray space

Example

library(shiny)
library(shinyBS)

ui = fluidPage(

  sidebarPanel(
  
                                splitLayout(textInput("datset_location", "Data location ", value = "", width = NULL, placeholder = NULL), uiOutput("uiExample"))
)
)

server = function(input, output, seassion){

     output$uiExample <- renderUI({
     tags$span(
       popify(bsButton("pointlessButton", "Button", style = "primary", size = "Large"),
         "Select data",
         "Type the location of the data"),
         
     )
   })

}

shinyApp(ui = ui, server = server)

Answer 1

The alignment in your case is based on the title parameter of the textInput(). If you set title = NULL within your textInput() you will see that both elements textInput() and bsButton() are centered as you wish.

If you want to keep the title, you can give the bsButton() additional styling like adding a fixed top margin for example with tagAppendAttributes().

To fill up the whole gray space you can add a div() within the splitLayout() making it a flexbox with 'justify-content: between' and set width parameter of your textInput() to '100%'.

Also is there a reason why you render the bsButton() in a renderUI() first? You could also write it, as it is, directly into your ui under textInput()

library(shiny)
library(shinyBS)
library(dplyr)
library(htmltools)

ui = fluidPage(
  
  sidebarPanel(
    
    splitLayout(
      
      div(style = "display: flex; justify-content: space-between; gap: 1rem;",
      
      textInput("datset_location", "Data location ", value = "", width = "100%", placeholder = NULL), 

      uiOutput("uiExample")))
  )
)

server = function(input, output, seassion){
  
  output$uiExample <- renderUI({
    tags$span(
      popify(bsButton("pointlessButton", "Button", style = "primary", size = "Large") %>%
               tagAppendAttributes(style = "margin-top: 2.5rem;"),
             "Select data",
             "Type the location of the data"),
      
    )
  })
  
}

shinyApp(ui = ui, server = server)