How can you place text exactly in the middle between left and right end of shiny dashboard body at this height?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = T),
dashboardBody(
fluidRow(
column(5,),
column(4,
span(h2(strong("Covid-19 Situation Dashboard"), style = 'font-size:30px;color:#6cbabf;')))
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Use align = "center", as shown below.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = T),
dashboardBody(
fluidRow(
#column(5,),
column(12,
span(h2(strong("Covid-19 Situation Dashboard"), align = "center", style = 'font-size:30px;color:#6cbabf;')))
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Related
Once I add an HTML document in my shiny app my graphs stop populating. I am using bs4dash but shinydashboard also has the exact same issue.
Below is my code as well as a screenshot of what is happening.
Code before i add HTML document
Ui
library(shiny)
library(bs4Dash)
library(highcharter)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
)
),
fluidRow(
box(
#width = 12,
#includeHTML("first.html")
)
)
)
)
Server
server <- function(input, output) {
a = rnorm(100)
output$plot1 = renderPlotly({
plot_ly(x = ~a, type = "histogram")
})
}
Now when i remove the hastags to display my HMTL document. My graph all of a sudden disappears.
Ui
library(shiny)
library(bs4Dash)
library(highcharter)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
)
),
fluidRow(
box(
width = 12,
includeHTML("first.html")
)
)
)
)
Server
server <- function(input, output) {
a = rnorm(100)
output$plot1 = renderPlotly({
plot_ly(x = ~a, type = "histogram")
})
}
I would like to have the graph still show. What is going wrong in the code. Thank you
I cannot reproduce your problem. I just observed that your fluidRow is the fourth parameter of dashboardPage which, however, expects a dashboardControlbar. Both, putting the fluidRow into dashboardBody or wrapping it in a call to dashboardControlbar works for me.
So either it is your first.html or indeed "just" the missing dashboardControlbar.
first.html
<span>I am an external HTML</span>
app.R
library(shiny)
library(bs4Dash)
library(highcharter)
library(plotly)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
),
fluidRow(
box(
width = 12,
includeHTML("first.html")
)
)
)
)
ui2 <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
box(width = 12,
plotlyOutput("plot1")
)
),
dashboardControlbar(
fluidRow(
box(
width = 12,
includeHTML("first.html")
)
)
)
)
server <- function(input, output) {
a = rnorm(100)
output$plot1 = renderPlotly({
plot_ly(x = ~a, type = "histogram")
})
}
shinyApp(ui, server)
## shinyApp(ui2, server) ## works likewise
Screenshots
How can I change the font size and color of title in shinydashboard box()?
library(shiny)
library(plotly)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width=12)),
fluidRow(
box(title="Title")
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
r
You can use a header tag and style option within it.
library(shiny)
library(plotly)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width=12)),
fluidRow(
box(title=h3("Title", style = 'font-size:42px;color:blue;'))
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
I have the shiny dashboard below and as you see I want to display a datatable inside sidebar but the issue is that the table is much wider. Can I make the table fit in exactly in the sidebar without increasing sidbar width?
library(shiny)
library(shinydashboard)
library(DT)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Table" , tabname = "my_table", icon = icon("table"),DT::dataTableOutput("example_table")
),
menuItem("Next Widget", tabName = "Other"))),
dashboardBody(
tabItems(
tabItem(tabName = "subMenu", #my_table",
fluidRow(
)),
tabItem(tabName = "Other",
h2("Other tab")
)
)))
server <- function(input, output) {
output$example_table <- DT::renderDataTable(head(mtcars))
}
shinyApp(ui, server)
One quick way is to enable horizontal scrolling for your DT. Then the table will fit the container but be scrollable:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Table" , tabname = "my_table", icon = icon("table"),DT::dataTableOutput("example_table")
),
menuItem("Next Widget", tabName = "Other"))),
dashboardBody(
tabItems(
tabItem(tabName = "subMenu", #my_table",
fluidRow(
)),
tabItem(tabName = "Other",
h2("Other tab")
)
)))
server <- function(input, output) {
output$example_table <- DT::renderDataTable(head(mtcars), options = list(scrollX=TRUE))
}
shinyApp(ui, server)
I have a basic shiny dashboard below and I would like to know if I can a little bit left or right the bs button "show/hide sidebar".
#ui.r
library(shinydashboard)
library(shiny)
library(shinyBS)
dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = TRUE),
dashboardBody(
tabsetPanel(
id = 'testingDPEtab',
tabPanel("Upload",
bsButton("showpanel8", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody())
)
)
))
#server.r
server <- function(input, output) { }
Depending on whether you want to apply the "moving" to a specific button or for all these buttons you can do:
tags$head(
tags$style(HTML('#showpanel8{margin-left:10px}'))
)
Here, the button is referenced by id. So the change will only apply to that button.
#showpanel8{margin-left:10px} is CSS syntax to style the button.
For other margins you can use:
margin-top
margin-right
margin-bottom
margin-left
See here: https://www.w3schools.com/css/css_margin.asp.
Full reproducible example:
library(shinydashboard)
library(shiny)
library(shinyBS)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(disable = TRUE),
dashboardBody(
tags$head(
tags$style(HTML('#showpanel8{margin-left:10px}'))
),
tabsetPanel(
id = 'testingDPEtab',
tabPanel("Upload",
bsButton("showpanel8", "Show/Hide sidebar",
icon = icon("toggle-off"), type = "toggle",
style = "info", value = TRUE),
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody())
)
)
))
#server.r
server <- function(input, output) { }
shinyApp(ui, server)
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
wellPanel(tags$div(id="pane",
fluidRow(
column(width = 6,valueBox("test","test1"),
valueBox("test","test2"))),
fluidRow(
column(width = 6,valueBox("test","test3"),
valueBox("test","test4")
))),
tags$style(type="text/css","#pane{font-size:20px;}"))
))
# )
server <- function(input, output) {}
shinyApp(ui, server)
Results
However, I only need the highlighted portion; ie wellpanel width should be as per boxes
This is just an example, I will be adding four more boxes besides with a different wellpanel.
Try using width in valueBox
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(column(width = 6, wellPanel(tags$div(id="pane",
fluidRow(valueBox(width = 6, "test","test1"), valueBox(width = 6, "test","test2")),
fluidRow(valueBox(width = 6, "test","test3"), valueBox(width = 6, "test","test4")),
tags$style(type="text/css","#pane{font-size:20px;}")
))))
)
)
server <- function(input, output) {}
shinyApp(ui, server)