pickerInput() not aligning in splitLayout

62 Views Asked by At

I'm trying to add multiple aligned inputs in a dashboard and it works fine with textInput() but I dont understand why it gets all crazy when I change for a pickerInput()?

enter image description here

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

ui = fluidPage(
  
  sidebarPanel(
    
    # textInput

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

          tags$span(
      popify(bsButton("pointlessButton1", "Button", style = "primary", size = "Large") %>%
               tagAppendAttributes(style = "margin-top: 2.5rem;"),
             "Select data",
             "Type the location of the data"),
      
    ))),

    # textInput2

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

          tags$span(
      popify(bsButton("pointlessButton1", "Button", style = "primary", size = "Large") %>%
               tagAppendAttributes(style = "margin-top: 2.5rem;"),
             "Select data",
             "Type the location of the data"),
      
    ))),

   # pickerInput

       splitLayout(
      
      div(style = "display: flex; justify-content: space-between; gap: 1rem;",
      
      pickerInput("datset_location", "Data location", choices = c("A", "B", "C"), width = "auto"), 

          tags$span(
      popify(bsButton("pointlessButton2", "Button", style = "primary", size = "Large") %>%
               tagAppendAttributes(style = "margin-top: 2.5rem;"),
             "Select data",
             "Type the location of the data"),
      
    )))

  )
)

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

shinyApp(ui = ui, server = server)
1

There are 1 best solutions below

3
On

Update: Here is an update after clarification: (revmoved first answer) Use fluidRow and column:

library(shiny)
library(shinyBS)
library(shinyWidgets)

ui = fluidPage(
  
  sidebarPanel(
    
    fluidRow(
      
      column(8,
             tags$label("textInput1"),
             textInput("dataset_location", "", value = "", width = "100%", placeholder = NULL)
      ),
      
      column(4,
             tags$div(style = "padding-top: 40px;",
                      popify(bsButton("pointlessButton1", "Button", style = "primary", size = "Large"),
                             "Select data",
                             "Type the location of the data")
             )
      )
    ),
    
    fluidRow(
      
      column(8,
             tags$label("textInput2"),
             textInput("dataset_location2", "", value = "", width = "100%", placeholder = NULL)
      ),
      
      column(4,
             tags$div(style = "padding-top: 40px;",
                      popify(bsButton("pointlessButton2", "Button", style = "primary", size = "Large"),
                             "Select data",
                             "Type the location of the data")
             )
      )
    ),
    
    fluidRow(
      
      column(8,
             tags$label("Data location"),
             pickerInput("dataset_location3", "", choices = c("A", "B", "C"))
      ),
      
      column(4,
             tags$div(style = "padding-top: 40px;",
                      popify(bsButton("pointlessButton3", "Button", style = "primary", size = "Large"),
                             "Select data",
                             "Type the location of the data")
             )
      )
    )
  )
)

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

shinyApp(ui = ui, server = server)

enter image description here