How can I position Shiny widgets (e.g. the dropdown box of selectInput()) besides their headers? I've been playing around with various tags formulations without any luck. Grateful for any pointers.
ui.R
library(shiny)
pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
tags$head(
tags$style(type="text/css", ".control-label {display: inline-block;}"),
tags$style(type="text/css", "#options { display: inline-block; }"),
tags$style(type="text/css", "select { display: inline-block; }")
),
selectInput(inputId = "options", label = "dropdown dox:",
choices = list(a = 0, b = 1))
),
mainPanel(
h3("bla bla")
)
)
server.R
shinyServer(function(input, output) { NULL })
Is this what you want?
library(shiny)
runApp(list(ui = pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
tags$head(
tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: inline-block!important; }")
),
selectInput(inputId = "options", label = "dropdown dox:",
choices = list(a = 0, b = 1))
),
mainPanel(
h3("bla bla")
)
)
, server = function(input, output) { NULL })
)
Related
I am having issues with the UI of a shiny app. In my app, the choices for my selectInputs are hidden behind a downloadButton.
library(shiny)
ui <- navbarPage(
tabPanel("View Archive",
sidebarLayout(
sidebarPanel(
tags$h4("Archive Filter", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center",
radioButtons(
inputId = "archive.choice",
label = "Select Tasks to Display",
choices = c("Completed" = "archive.completed", "Scheduled" = "archive.scheduled")
),
tags$h4("Create Archive Report", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center"),
splitLayout(cellWidths = c("50%", "50%"),
selectInput(
inputId = "report.month",
label = "Select Month",
choices = as.list(month.name)
),
selectInput(
inputId = "report.year",
label = "Select Year",
choices = (2020:format(Sys.Date(), "%Y"))
)
),
downloadButton('downloadData', 'Download Report')
)
))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
I've tried changing the z-index of the selectInputs but haven't had any success with that. Does anyone know a way to resolve this issue? It seems like it should be simple but I haven't been able to find a solution. Thanks in advance.
I changed the splitLayout approach and used a fluidRow() with two columns instead.
library(shiny)
ui <- navbarPage(
title = 'StackOverFlow App',
tabPanel(
title = "First Panel",
sidebarLayout(
sidebarPanel = sidebarPanel(
tags$h4("Archive Filter", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center"),
radioButtons(
inputId = "archive.choice",
label = "Select Tasks to Display",
choices = c("Completed" = "archive.completed", "Scheduled" = "archive.scheduled")
),
tags$h4("Create Archive Report", style = "font-weight: 450; margin-top: 0; text-decoration: underline; text-align: center"),
fluidRow(
column(
width = 6,
selectInput(
inputId = "report.month", label = "Select Month",
choices = as.list(month.name)
)
),
column(
width = 6,
selectInput(
inputId = "report.year", label = "Select Year",
choices = (2020:format(Sys.Date(), "%Y")))
)
),
downloadButton('downloadData', 'Download Report', style='z-index:1;')
),
mainPanel = mainPanel()
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
To get the job down using splitLayout it would be necesary to change the css z-index property of the selectImput.
Is there a R function to adjust the title " Factors under the dataset " and "Numbers under the dataset". Below is the code I have tried. So I need the title at the middle of the grey coloured bar
library(shiny)
ui <- fluidPage(
tabsetPanel(tabPanel(
"Factor_Univariate_Analysis",sidebarLayout(
sidebarPanel(
column(h6(selectInput("se1","Factors under the dataset",choices =
c("","Add","sub"))),width = 11,height= 20,offset = 0),width = 1000),
mainPanel(h5(plotOutput("Plot1",width = 1000,height = 1500)))
)
),
tabPanel(
"Numeric_Univariate_Analysis",sidebarLayout(
sidebarPanel(
column(h6(selectInput("se2","Numbers under the dataset",choices =
c("","mean","median","standard_deviation","Data Distribution"))),width
= 11,height= 20,offset = 0),width = 1000),
mainPanel(h5(plotOutput("Plot2",width = 1500,height = 500)))
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Here is some code which I think is close to what you want to do, I'll just explain a few things first:
I have five years experience as a web developer, so I enjoy using CSS, and I would recommend using it where ever possible. What I beleive you were trying to do is give the label a background, this can be done with CSS. In this case I have put it in the style and html tags. label {} applies styles to all labels. You might want to agust the background color.
I have removed the side panel layouts.
Hopefully you find this helpful.
library(shiny)
ui <- fluidPage(
tags$style(HTML("
label {
width: 100%;
background: lightgrey;
padding: 5px;
border-radius: 5px;
}
")),
tabsetPanel(
tabPanel(
"Factor_Univariate_Analysis",
div(
column(width = 12,
h6(
selectInput(
"se1",
label = "Factors under the dataset",
choices = c("","Add","sub"),
width = "100%"
)
)
),
div(plotOutput("Plot1",width = 1000,height = 1500))
)
),
tabPanel(
"Numeric_Univariate_Analysis",
column(width = 12,
h6(
selectInput(
"se2",
"Numbers under the dataset",
choices = c("","mean","median","standard_deviation","Data Distribution"),
width = "100%"
)
)
),
div(plotOutput("Plot2",width = 1500,height = 500))
)
)
)
server <- function(input, output, session) {
observe({
print(input$se1)
updateSelectInput(session, input$se1, label = "Factors under the dataset replaced")
})
}
# https://shiny.rstudio.com/reference/shiny/latest/updateSelectInput.html
shinyApp(ui, server)
Can anyone help to get this button vertically in-line (visually, not in a css sense) with the other input widgets?
require(shiny)
ui = fluidPage(
verticalLayout(
fluidRow(style = "background-color: orange;",
column(3, actionButton('button', 'A button')),
column(3, textInput('text', 'text', width = '100%')),
column(3, selectizeInput('selectize1', 'letters', letters, multiple=TRUE)),
column(3, selectizeInput('selectize2', 'LETTERS', LETTERS, multiple=TRUE))
)
)
)
server = function(input, output, session) { NULL }
shinyApp(ui = ui, server = server)
Thanks
Use the div() function to edit html elements
require(shiny)
ui = fluidPage(
verticalLayout(
fluidRow(style = "background-color: orange;",
column(3, div(align = "center",style="padding-top: 30px;width:100%", actionButton('button', 'A button'))),
column(3, textInput('text', 'text', width = '100%')),
column(3, selectizeInput('selectize1', 'letters', letters, multiple=TRUE)),
column(3, selectizeInput('selectize2', 'LETTERS', LETTERS, multiple=TRUE))
)
)
)
server = function(input, output, session) { NULL }
shinyApp(ui = ui, server = server)
This did it:
tags$head(tags$style(HTML("#button { margin-top: 25px; } ")))
I've got a shiny application like this:
server.R:
library(shiny)
function(input, output) { NULL }
and ui.R:
library(shiny)
pageWithSidebar(
headerPanel("side-by-side"),
fluidRow(
column(2),
column(4,
wellPanel(
selectInput(inputId = "options", label = "some text",
choices = list(a = 0, b = 1)))
)
),
fluidRow(
h3("bla bla")
)
)
And I would like to have the label of selectInput next to it, not above. Do you know how to do it?
I've found this: Positioning Shiny widgets beside their headers
but it doesn't work for me.
There's multiple ways of doing this, here's one:
library(shiny)
server <- shinyServer(function(input, output) { NULL })
ui <- shinyUI(
pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
fluidRow(
tags$head(
tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
),
column(2),
column(4,
selectInput(inputId = "options", label = "some text",
choices = list(a = 0, b = 1))
)
)),
mainPanel(
fluidRow(
h3("bla bla")
))
)
)
shinyApp(ui=ui,server=server)
If you don't want to mess with shinys default CSS you can just leave the label empty and create a label next to it instead of forcing the existing label to the side.
This is a simplification of my Shiny UI. My issue is that the pull-down menu from the SelectizeInput is hidden. It is a bit of a pain having to scroll down. Also, it just does not look very nice. I have tried playing with the z-index to bring it up front but have not had any success.
This is my code:
library(shiny)
runApp(list(
ui = fluidPage(
tabsetPanel(id = "tabs",
tabPanel("Search",
fluidRow(
column(12,
inputPanel(
selectizeInput("s1", h4("Select State:"),
choices = state.name),
tags$head(tags$style(".selectize-control.single { width: 400px; z-index: 1; }")),
dateInput("day", h4("Input Date:"), value = Sys.Date())
)
)
)
)
)),
server = function(input,output,session)
{
})
)
Basically, I want the SelectizeInput menu to display on top like the DateInput calendar.
Thanks for the help!
Carlos
You can use the options from the selectize.js library https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md . dropdownParentmaybe what you are looking for:
library(shiny)
runApp(list(
ui = fluidPage(
tabsetPanel(id = "tabs",
tabPanel("Search",
fluidRow(
column(12,
inputPanel(
selectizeInput("s1", h4("Select State:")
, options = list(dropdownParent = 'body')
, choices = state.name),
tags$head(tags$style(".selectize-control.single { width: 400px; z-index: 1; }")),
dateInput("day", h4("Input Date:"), value = Sys.Date())
)
)
)
)
)),
server = function(input,output,session)
{
})
)
Alternatively you can look at CSS and something like the overflow attribute. See Dropdowns not extending in shiny tabPanel . So in this case use
tags$head(tags$style(".tab-content {overflow: visible;}")),