'Panel output displaying on top of navbarPage and other panel output - R Shiny UI
Despite the navbarPage and tabPanel combo of a Shiny UI appearing to be straightforward, I can't for the life of me get the UI of my Shiny app to display correctly. I simply want a main tabPanel titled "Matchup Finder" that displays the dashboard I've created and then another panel titled "About" that will eventually display some html when clicked that explains what's happening on the dashboard. However, upon running, the About page contents shows up behind the output from the Matchup Finder dashboard, and there's no button for the Matchup Finder tabPanel. I've tried a variety of things (i.e., adding fluidPage, and id for the navbarPage, among others) to no avail.
ui <- navbarPage(
tabPanel("Matchup Finder",
fluidRow(
column(6,
fluidRow(
column(12,
wellPanel(
style = "background-color: ghostwhite; border-color: #2c3e50; height: 360px;",
fluidRow(
column(6,
radioButtons(inputId = "radio",
label = "View",
choices = list(
"By player" = 1,
"By team" = 2)),
selectInput(inputId = "off_player",
label = "Offensive player",
choices = c("Jayson Tatum"),
selectize = TRUE,
selected = c("Jayson Tatum")),
conditionalPanel(
condition = "input.radio == '1'",
selectizeInput(
inputId = "def_players",
label = "Defensive players",
choices = c("Kevin Durant", "Khris Middleton",
"Matisse Thybulle", "OG Anunoby", "Scottie Barnes"),
multiple = TRUE)),
conditionalPanel(
condition = "input.radio == '2'",
selectInput(inputId = "def_team",
label = "Defensive team",
choices = c("ATL", "CHA", "CLE"),
selectize = FALSE,
selected = c("ATL"))),
selectInput(inputId = "metrics",
label = "Select metric:",
choices = c("pts_created_per_100", "off_avg_pts_created_per_100"),
selectize = FALSE,
selected = "pts_created_per_100")),
column(6,
checkboxGroupInput(
inputId = "seasons",
label = "Select season:",
choices = c("2018", "2019", "2020", "2021", "2022"),
selected = c("2018", "2019", "2020", "2021", "2022"),
inline = TRUE),
checkboxGroupInput(inputId = "season_type",
label = "Select type:",
choices = c("playoffs", "reg"),
selected = c("playoffs", "reg"),
inline = TRUE),
sliderInput(inputId = "poss",
label = "Minimum possessions:",
0, 160, 20, step = 20)))))),
fluidRow(
column(12,
wellPanel(
style = "background-color: ghostwhite; border-color: #2c3e50; height: 420px;",
tabsetPanel(type = "tabs",
tabPanel("Selected", DTOutput("selected_table", width = 640)),
tabPanel("Top 5 Defenders", DTOutput("top_perf", width = 640)),
tabPanel("Most Frequent", DTOutput("top_vol", width = 640))))))),
column(6,
wellPanel(
style = "background-color: ghostwhite; border-color: #2c3e50; height: 795px;",
fluidRow(
column(12,
mainPanel(
plotOutput("plot1",
height = 760,
width = 620)))))))),
tabPanel("About", icon = icon("bars"),
fluidRow(
column(12,
wellPanel(
# style = "background-color: #fff; border-color: #2c3e50;",
"This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank"))))
)
Solution 1:[1]
Individual tabPanel tabs need to be wrapped inside a tabsetPanel (See here for an example):
library(shiny)
library(DT)
ui <- navbarPage(
tabsetPanel(
tabPanel(
"Matchup Finder",
fluidRow(
column(
6,
fluidRow(
column(
12,
wellPanel(
style = "background-color: ghostwhite; border-color: #2c3e50; height: 360px;",
fluidRow(
column(
6,
radioButtons(
inputId = "radio",
label = "View",
choices = list(
"By player" = 1,
"By team" = 2
)
),
selectInput(
inputId = "off_player",
label = "Offensive player",
choices = c("Jayson Tatum"),
selectize = TRUE,
selected = c("Jayson Tatum")
),
conditionalPanel(
condition = "input.radio == '1'",
selectizeInput(
inputId = "def_players",
label = "Defensive players",
choices = c(
"Kevin Durant", "Khris Middleton",
"Matisse Thybulle", "OG Anunoby", "Scottie Barnes"
),
multiple = TRUE
)
),
conditionalPanel(
condition = "input.radio == '2'",
selectInput(
inputId = "def_team",
label = "Defensive team",
choices = c("ATL", "CHA", "CLE"),
selectize = FALSE,
selected = c("ATL")
)
),
selectInput(
inputId = "metrics",
label = "Select metric:",
choices = c("pts_created_per_100", "off_avg_pts_created_per_100"),
selectize = FALSE,
selected = "pts_created_per_100"
)
),
column(
6,
checkboxGroupInput(
inputId = "seasons",
label = "Select season:",
choices = c("2018", "2019", "2020", "2021", "2022"),
selected = c("2018", "2019", "2020", "2021", "2022"),
inline = TRUE
),
checkboxGroupInput(
inputId = "season_type",
label = "Select type:",
choices = c("playoffs", "reg"),
selected = c("playoffs", "reg"),
inline = TRUE
),
sliderInput(
inputId = "poss",
label = "Minimum possessions:",
0, 160, 20, step = 20
)
)
)
)
)
),
fluidRow(
column(
12,
wellPanel(
style = "background-color: ghostwhite; border-color: #2c3e50; height: 420px;",
tabsetPanel(
type = "tabs",
tabPanel("Selected", DTOutput("selected_table", width = 640)),
tabPanel("Top 5 Defenders", DTOutput("top_perf", width = 640)),
tabPanel("Most Frequent", DTOutput("top_vol", width = 640))
)
)
)
)
),
column(
6,
wellPanel(
style = "background-color: ghostwhite; border-color: #2c3e50; height: 795px;",
fluidRow(
column(
12,
mainPanel(
plotOutput("plot1",
height = 760,
width = 620
)
)
)
)
)
)
)
),
tabPanel("About",
icon = icon("bars"),
fluidRow(
column(
12,
wellPanel(
# style = "background-color: #fff; border-color: #2c3e50;",
"This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank
This panel is intentionally left blankThis panel is intentionally left blank"
)
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | danlooo |