CODEWITHSUNDEEP
cssrshinyshinydashboard
Adam Shaw
Adam Shaw

Reputation: 519

Positioning the R shiny selectInput widgets

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)

SelectInput bar capture

Upvotes: 2

Views: 4442

Answers (2)

Florian
Florian

Reputation: 25385

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!

enter image description here

## 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:

enter image description here

## 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)

Upvotes: 3

drmariod
drmariod

Reputation: 11762

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.

Upvotes: 0

Related Questions