I want to change the style of my Shiny app. I went here https://bootswatch.com/solar/ and downloaded the style .css file: "Solar A spin on Solarized".
library(shiny)
ui <- fluidPage(
titlePanel(tags$i(h1(strong("My Panel Title"),style = "font-family: 'times'; font-size: 82px"))),align="center",
navbarPage(theme="bootstrap.min.css",title = 'Methods',
tabPanel('One'),
tabPanel('Two'),
tabPanel('Three'),
tabPanel('Four'))
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
But as you can see the navigation bar looks weird:
How can I fix it?
The theme that you link to is a Bootstrap 4 theme, but Shiny uses Bootstrap 3. For compatible Bootswatch themes, see their v3 collection: https://bootswatch.com/3/.
For example, using the v3 Flatly theme via a CDN:
library(shiny)
ui <- fluidPage(
titlePanel(tags$i(
h1(strong("My Panel Title"), style = "font-family: 'times'; font-size: 82px")
)),
align = "center",
navbarPage(
theme = "https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/flatly/bootstrap.min.css",
title = 'Methods',
tabPanel('One'),
tabPanel('Two'),
tabPanel('Three'),
tabPanel('Four')
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Related
I have a simple app and want to add custom icons to my TabPanels
See code
library(shiny)
ui <- fluidPage(
br(),
navlistPanel(
tabPanel('Menu1', icon = icon("bar-chart-o"),
'Menu One',
tags$img(src='svg/frame.svg', height='40', width='40')
),
tabPanel('Menu2',
icon = tags$img(src='svg/frame.svg', height='40', width='40'),
'Menu Two')
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
As you can see, the tag is working well and I can see the svg image (in www/svg)
However it does not render the icon for Menu 2.
Quick solution is
title = div(img(src="svg/frame.svg"), "My Title")
library(shiny)
ui <- fluidPage(
br(),
navlistPanel(
tabPanel('Menu1', icon = icon("bar-chart-o"),
'Menu One',
tags$img(src='https://www.svgrepo.com/show/5840/like.svg', height='40', width='40')
),
tabPanel(div(img(src='https://www.svgrepo.com/show/5840/like.svg', height='20', width='20'), "Menu2"),
'Menu Two')
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
I have two modals. When the first is opened, the background should be grayed out, as is default. But this should not happen with the second one. The code is:
library(shiny)
ui <- fluidPage(
tags$style(type = 'text/css', '.modal-backdrop { display: none }'),
actionButton('modal1', 'Modal1'),
actionButton('modal2', 'Modal2'),
)
server <- function(input, output) {
observeEvent(input$modal1,
showModal(modalDialog(title = "Modal1"))
)
observeEvent(input$modal2,
showModal(modalDialog(title = "Modal2"))
)
}
shinyApp(ui = ui, server = server)
The css code should be connected to the id of the second modal dialog, but it is not possible to include an id in the function 'modalDialog'.
Any ideas about how to apply the css code selectively to only the second modal?
You can add JS code to hide the backdrop after showing the second modal using tags$script just after modalDialog.
library(shiny)
ui <- fluidPage(
actionButton('modal1', 'Modal1'),
actionButton('modal2', 'Modal2'),
)
server <- function(input, output) {
observeEvent(input$modal1,
showModal(modalDialog(title = "Modal1"))
)
observeEvent(input$modal2, {
showModal(
list(
modalDialog(title = "Modal2"),
tags$script("$('.modal-backdrop').css('display', 'none');")
)
)
})
}
shinyApp(ui = ui, server = server)
I successfully changed the text sizes in shiny dashboard interface by editing css file.
Or I use following structure:
div(DTOutput(outputId = "table"), style = "font-size:85%"))
However, I couldn't find the node name of shiny modals. Is it possible to change the text size in shiny modals through .css?
Are you looking for something like this?
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
title = "Important message",
div("This is an important message!", style="font-size:160%")
))
})
}
)
ModalDialog takes as its first argument(s) UI elements. This appears to be the same kind of arguments accepted by other shiny elements. Compare for example: ?siderbarPanel and ?modalDialog. So if you can do it in the body of an app, you can probably do it in a modal.
For example, I stuck a sidebar layout inside a modal:
shinyApp(
ui = basicPage(
actionButton("show", "Show modal dialog")
),
server = function(input, output) {
observeEvent(input$show, {
showModal(modalDialog(
sidebarLayout(sidebarPanel("yeah"),mainPanel("cool"))
))
})
}
)
I'm new to Shiny and can't figure out how to "unbold" labels (feed rate and operation in the screenshot attached). Here's my code for the UI part:
ui <- fluidPage(titlePanel(""),
sidebarLayout(
sidebarPanel(
# adding the new div tag to the sidebar
tags$div(class="header", checked=NA,
tags$h4(strong("Duty"))),
selectInput('id1', 'Feed rate (m^3/h)', c("All", main$metric[1:3])),
selectInput('id2', 'Operation', c("All", main$metric[4:5])),
mainPanel(DT::dataTableOutput("table"))
))
And here's the screenshot:
You can do this by adding your own style sheet to your Shiny app. First we give the sidebar panel a class sidebar so we can refer to it. Then we can add the following to a file www/style.css:
.sidebar label {
font-weight: 400;
}
Finally we set the theme parameter of your fluidPage to "style.css".
ui <- fluidPage(theme="style.css", titlePanel(""),
# content here
))
The result should look like this:
This is another option (you don't have to create a file)
library(shiny)
remove_bold <-"
#expr-container label {
font-weight: 400;
}
"
ui <- fluidPage(
titlePanel("My app"),
sidebarLayout(
sidebarPanel(
tags$style(remove_bold), ####### NEW CODE
tags$div(id = "expr-container", ####### NEW CODE
textInput(inputId = "data2", "Data1", value = "data"))
),
mainPanel(
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Inspired in this post: How to change the pickerinput label to fine instead of bold
I have some trouble with inserting a link into a navbar with navbarPage in shiny. I can put a link but the navbar looks weird. Does anyone know how to fix it ?
To produce an app with a link in the navbar :
library(shiny)
runApp(list(
ui = navbarPage(
title="My App",
tabPanel("tab1"),
tabPanel("tab2"),
tabPanel(a(href="http://stackoverflow.com", "stackoverflow"))),
server = function(input, output) { }
))
With shiny_0.9.1
Thanks !
EDIT :
A colleague show me a workaround, it consist of puting the link we want in panel 3 into the headerof panel 2.
An app to demonstrate this and the solution from #
20050 8519 21102 26896 16937 for the link in the title's app :
runApp(list(
ui = navbarPage(
title=HTML("stackoverflow"),
tabPanel("tab1"),
tabPanel(HTML("tab2</a></li><li><a href=\"http://stackoverflow.com\">stackoverflow"))
),
server = function(input, output) { }
))
I managed to get it working on a more recent version of Shiny for the left-hand site element of the NavBar, the title, with this:
corner_element = HTML(paste0('<a href=',shQuote(paste0("https://my.page.com/",page_name,"/")), '>', 'Foo', '</a>'))
navbarPage(corner_element, id="page", collapsable=TRUE, inverse=FALSE,
# [...]
)
With shiny 1.7.0 and bslib 0.3.0, it became easier to customize the navbar:
library(shiny)
library(bslib)
ui <- page_navbar(
nav("First tab"),
nav("Second tab"),
nav_item(a(href="http://stackoverflow.com", "stackoverflow")))
)
shinyApp(ui, server = function(...){})