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.
Related
I am creating an app which has one checkboxInput that if you click on it, you will have anoother options to select. These options are hidden by a conditionalPanel. You will only see them if you click the checkbox.
However, I was wondering if it is possible to put some tabulation into these options, because I don't want them to have the same level of organisation.
For example:
Code:
library(shiny)
ui <- fluidPage(
titlePanel("My app"),
sidebarLayout(
sidebarPanel(
tabsetPanel(
tabPanel("Tab1",
checkboxInput("option1", "Remove...", value = FALSE),
conditionalPanel(
condition = "input.option1 == 1",
radioButtons(inputId = "type_removal", label=NULL,
choices = c("Remove 1" = "remove1",
"Remove 2" = "remove2"))),
textInput(inputId = "data2", "Data1", value = "data")),
tabPanel("Tab2",
textInput(inputId = "data", "Data1", value = "data")
),
)
),
mainPanel(
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Is it possible to do it in Shiny?
Thanks very much in advance
Regards
You can add inline style to the conditional panel:
conditionalPanel(
condition = "input.option1 == 1",
style = "margin-left: 100px;",
radioButtons(inputId = "type_removal", label=NULL,
choices = c("Remove 1" = "remove1",
"Remove 2" = "remove2"))),
Add this css to your shiny app:
.shiny-options-group{
margin-left: 20px;
}
This is the problem I am trying to solve. My navbarpage overlaps other elements from below. Is there any way to put the navbarpage in the background? Or perhaps make the daterange input show it's calendar below its input box?
The documentation mentions using fixed-top or fixed-bottom for the posotion argument will cause the navbar to overlay your body content, unless you add padding.
Adding padding does not solve the problem though.
Here is a reproducible example -
ui <- fluidPage(
fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
navbarPage(
'Navbar',
tabPanel(
'Menu1',
sidebarPanel(
selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),
dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01',
min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
width = 2
),
mainPanel(width = 10)
),
tabPanel('Menu2'),
tabPanel('Menu3'),
tabPanel('Menu4')
)
)
server <- function(input, output){
}
shinyApp(ui, server)
Thank you so much!
Try adding z-index to the div: tags$style(HTML(".datepicker {z-index:99999 !important;}"))
library(shiny)
ui <- fluidPage(
fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
navbarPage(
'Navbar',
tabPanel(
'Menu1',
tags$style(HTML(".datepicker {z-index:99999 !important;}")),
sidebarPanel(
selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),
dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01',
min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
width = 2
),
mainPanel(width = 10)
),
tabPanel('Menu2'),
tabPanel('Menu3'),
tabPanel('Menu4')
)
)
server <- function(input, output){}
shinyApp(ui, server)
I've created a Shiny app using a fluid grid system (i.e., using fluidPage) that utilizes sidebarPanel and tabsetPanel. In addition to the input "control" widgets I put in the sidebar, I would also like to add a series of input widgets below the graphic in my main panel on a specific panel.
My approach was to simply include a fluidRow with multiple columns after the plotOutput command in the first tabPanel.
My code produces no errors, but for some reason nothing shows up under the graphic in my main panel.
Is this just not possible, or am I doing something wrong?
Note: this SO question suggests that my approach to including multiple UI elements within the tab is valid, and this SO question suggests that multiple outputs can be added to the mainPanel (but what about inputs??). So what gives??
Example code with same issue:
library(shiny)
ui <- fluidPage(
titlePanel(
h1("NMS Comparing tool", style = "font-size: 15px")
),
sidebarPanel(width = 3,
div(style = "font-size: 8px;",
sliderInput(inputId = "groups",
label = "No. of Groups",
value = 4, min = 2, max = 12)
),
fluidRow(
column(6,offset=0,
div(style = "height: 105px; padding: 0px 0px",
plotOutput(outputId = "scree")
)
),
column(6,offset=0,
div(style = "font-size: 8px;padding: 0px 10px;height: 105px",
checkboxGroupInput(inputId = "labels",
label = "Labels",
choices = c("SPEC","Plot-End","Plot-Start"),
selected = c("SPEC","Plot-End","Plot-Start")
)
)
)
),
fluidRow(
column(6,offset=0,
div(style = "font-size: 8px; padding: 0px 0px",
radioButtons(inputId = "data",
label = "Data",
choices = c("PSP Only","PSP + MAP"),
selected = "PSP + MAP")
)
),
column(6,offset=0,
div(style = "font-size: 8px;padding: 0px 10px;",
radioButtons(inputId = "freq",
label = "Frequency",
choices = c(0.025,0.05),
selected = 0.05)
)
)
),
fluidRow(
column(6,offset=0,
div(style = "font-size: 8px; padding: 0px 0px; ",
radioButtons(inputId = "arrows",
label = "Vector Choice",
choices = c("Cumulative Change","All Samples","Hurricane"),
selected = "Cumulative Change")
)
),
column(6,offset=0,
div(style = "font-size: 8px;padding: 0px 10px",
selectInput(inputId = "size",
label = "Tree Size",
choices = c("All","Canopy","Subcanopy","Small"),
selected = "All"),
tags$style(type = "text/css",
"#size {height: 4px; }")
)
)
),
fluidRow(
div(style = "font-size: 8px;",
verbatimTextOutput("info")
)
)
,
mainPanel(width = 9,
tabsetPanel(
tabPanel(title = "NMS",
plotOutput(outputId = "nms", click = "plot_click"),
fluidRow(
column(2,offset=0,
div(style = "font-size: 8px; padding: 0px 0px",
actionButton(inputId = "plot.singles", label = "Lookup")
)
),
column(2,offset=0,
div(style = "font-size: 8px; padding: 0px 0px",
textInput(inputId = "individ", label = "Plot(s)")
)
),
column(2,offset=0,
div(style = "font-size: 8px; padding: 0px 0px",
textInput(inputId = "group.choose", label = "Group(s)")
)
),
column(3,offset=0,
div(style = "font-size: 8px; padding: 0px 0px",
sliderInput(inputId = "lwidth.choose", label = "LineWidth",min = 1, max = 6)
)
)
)
),
tabPanel(title = "Silhouette", plotOutput(outputId = "silhouette")),
tabPanel(title = "Indicator Spp", dataTableOutput(outputId = "ind.spp")),
tabPanel(title = "Data", dataTableOutput(outputId = "nms.data.table"))
)
)
)
)
server <- function(input, output) {
output$scree <- renderPlot({
par(mar = c(1.5,1.4,0.1,0.1), mgp = c(0.5,0.01,0), tcl = -0.1)
plot(runif(99),runif(99),cex.axis=0.5,cex.lab=0.5,cex=0.75)
},height = 95, width = 135)
output$nms <- renderPlot({
plot(runif(99),runif(99))
})
}
shinyApp(ui = ui, server = server)
Certainly what you're trying to do is possible. When I run your example code, I actually do see the widgets underneath the plot (Lookup, Plot(s), Group(s), etc.). But I had to fix a couple of small things first--for one thing, you need to give a value to sliderInput. For another, you've got a misplaced bracket that's causing the mainPanel to be shoved into your sidebarPanel.
But there's no problem with your fluidRow itself, as written. Make sure you've put it in the right place in the UI.
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.
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 })
)