Hello,
So I have been having some issues with the CSS properties in Shiny. Issue 1: I am trying to get my 2nd and 3rd Tabs to be fillPage and the 1st to be a fluidPage. It seems that once I use fillPage it automatically goes on all tabs. Issue 2: I am trying to get my Plotly graphs to be responsive to any size screen and have tried setting their height using vh. It seems this makes them really squished on my laptop screen and then lots of white space at the bottom on my monitor. Page 2 I want the tabpanels to be 50/50 on the screen for example.
Thank you.
# UI #
ui <- dashboardPage(skin = "black", title = "Catapult",
## HEADER ##
dashboardHeader(title = strong("Catapult")),
## SIDEBAR ##
dashboardSidebar(
sidebarMenu(
menuItem("File Upload", tabName = "tab1", icon = icon("file")),
menuItem("Team", tabName = "tab2", icon = icon("users")),
menuItem("Player", tabName = "tab3", icon = icon("user")),
menuItem("GitHub", icon = icon("github"), href = "https://github.com/blg-uwm/Catapult", newtab = TRUE)
)
),
## BODY ##
dashboardBody(inlineCSS(CSS),
tabItems(
## TAB 1 - Import File ##
tabItem(tabName = "tab1",
## ROW 1 ##
fluidRow(
column(3,
img(src="logo.png", height = "85%", width = "85%")
),
box(title = "Upload Catapult File(s)", width = 3, background = "black", align = "center",
fileInput("files", "Select CSV File(s)", multiple = TRUE, accept = c(".csv")),
tags$h5("Missing Catapult data and want to test out the app?"),
actionButton("demoFiles", "Get Files", onclick = "window.open('https://github.com/blg-uwm/Catapult/tree/master/Catapult%20Demo%20Files', '_blank')")
),
gradientBox(width = 2, title = "Overview", footer =
h2(id = "numPractice", textOutput("numPractice")),
br(),
h2(id = "numGame", textOutput("numGame"))
),
tabBox(width = 4, title = "Player Load Statistics",
tabPanel("Games",
verbatimTextOutput("minGame"),
verbatimTextOutput("avgGame"),
verbatimTextOutput("maxGame")
),
tabPanel("Practices",
verbatimTextOutput("minPractice"),
verbatimTextOutput("avgPractice"),
verbatimTextOutput("maxPractice")
)
)
),
br(),
br(),
## ROW 2 ##
fluidRow(
column(12,
withSpinner(DTOutput("table"), type = 7, color = "#FFCC00", size = 2)
)
)
),
## TAB 2 - Team ##
tabItem(tabName = "tab2",
fillPage(
## ROW 1 ##
fluidRow(
tabBox(width = 12,
tabPanel("Player Load",
withSpinner(plotlyOutput("TeamLoadChrono", height = "30vh"), type = 7, color = "#FFCC00", size = 2)
),
tabPanel("Max Velocity",
withSpinner(plotlyOutput("TeamVelocityChrono", height = "30vh"), type = 7, color = "#FFCC00", size = 2)
)
)
),
## ROW 2 ##
fluidRow(
tabBox(width = 12,
tabPanel("Player Load",
withSpinner(plotlyOutput("TeamLoadCode", height = "30vh"), type = 7, color = "#FFCC00", size = 2)
),
tabPanel("Max Velocity",
withSpinner(plotlyOutput("TeamVelocityCode", height = "30vh"), type = 7, color = "#FFCC00", size = 2)
)
)
)
)
),
## TAB 3 - Player ##
tabItem(tabName = "tab3",
fillPage(
## ROW 1 ##
fluidRow(
column(3,
pickerInput("player", "Player", choices = NULL, options = pickerOptions(actionsBox = TRUE))
)
),
## ROW 2 ##
fluidRow(
tabBox(width = 12,
tabPanel("Player Load",
withSpinner(plotlyOutput("PlayerLoadChrono", height = "27vh"), type = 7, color = "#FFCC00", size = 2)
),
tabPanel("Max Velocity",
withSpinner(plotlyOutput("PlayerVelocityChrono", height = "27vh"), type = 7, color = "#FFCC00", size = 2)
)
)
),
br(),
## ROW 3 ##
fluidRow(
tabBox(width = 12,
tabPanel("Player Load",
withSpinner(plotlyOutput("PlayerLoadCode", height = "27vh"), type = 7, color = "#FFCC00", size = 2)
),
tabPanel("Max Velocity",
withSpinner(plotlyOutput("PlayerVelocityCode", height = "27vh"), type = 7, color = "#FFCC00", size = 2)
)
)
)
)
)
)
)
)