Positioning the R shiny selectInput widgets

Question

Please run the R shiny script below, I require help regarding shifting the two selectInputs a little above their current position. Currently the selectInput dropdown is not appearing clear. I tried using padding but no use. Attaching the snapshot for reference. Kindly help.

## app.R ##
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "first Chart"),
dashboardSidebar(
width = 0),
dashboardBody(
box(
  splitLayout(

    cellArgs = list(style = "padding: 2px;padding-top:0px;"),

  selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
  "400"),
  selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
  "400")),
  title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
  T,
    plotlyOutput("first_plot"))))
    server <- function(input, output) 
    { 
    output$first_plot <- renderPlotly({
    p <- plot_ly(
    x = c("giraffes", "orangutans", "monkeys"),
    y = c(20, 14, 23),
    name = "SF Zoo",
    type = "bar"
    )
    })
    }
    shinyApp(ui, server)

Answer 1

this is another way to create your UI with fluidRow and column which I think solves your issue - the dropdowns now work properly. Hope this helps!

## app.R ##
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
  dashboardHeader(title = "first Chart"),
  dashboardSidebar(
    width = 0),
  dashboardBody(
    box(      title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
                T,
fluidRow(width=12,
         column(width=6,
        selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
                      "400")),
        column(width=6,
        selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
                      "400"))),
fluidRow(
column(width=12,
      plotlyOutput("first_plot"))))))

server <- function(input, output) 
{ 
  output$first_plot <- renderPlotly({
    p <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
}
shinyApp(ui, server)

---

Alternative with less space between the box header and the selectInputs:

## app.R ##
library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
  dashboardHeader(title = "first Chart"),
  dashboardSidebar(
    width = 0),
  dashboardBody(
    box(      title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
                T,
              div(id='my_div',style='margin-top:-20px;',
              fluidRow(width=12,
                       column(width=6,
                              selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
                                            "400")),
                       column(width=6,
                              selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
                                            "400")))),
              fluidRow(
                column(width=12,
                       plotlyOutput("first_plot"))))))

server <- function(input, output) 
{ 
  output$first_plot <- renderPlotly({
    p <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
}
shinyApp(ui, server)

Answer 2

If you want to stay with your original way instead of fluidRow you just need to change the padding to only add it to the bottom part.

library(shiny)
library(shinydashboard)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "first Chart"),
dashboardSidebar(
width = 0),
dashboardBody(
box(
  splitLayout(

    cellArgs = list(style = "padding: 0px 0px 70px 0px;"),

  selectInput("stats1", "", c("Time","Cases"),selected = "Time", width = 
  "400"),
  selectInput("stats2", "", c("Time","Cases"),selected = "Time", width = 
  "400")),
  title = "Sankey Chart", status = "primary",height = "535" ,solidHeader = 
  T,
    plotlyOutput("first_plot"))))
    server <- function(input, output) 
    { 
    output$first_plot <- renderPlotly({
    p <- plot_ly(
    x = c("giraffes", "orangutans", "monkeys"),
    y = c(20, 14, 23),
    name = "SF Zoo",
    type = "bar"
    )
    })
    }
    shinyApp(ui, server)

So if you provide 4 values to padding instead of one, they get assigned as top right bottom left .