I want to increase the size of the font in a column, under fluid-row. Below is the code I am trying :
fluidRow(
column(12, div(style="height:20px;font-size: 35px;"),'Approval Request Summary'))
Any idea what am I doing wrong?
You have it almost right. You just need to make sure that the text to be rendered is within the call to div() rather than outside it (which is where you currently have it).
The following should give you the results you're expecting:
ui <- fluidPage(
fluidRow(
column(width = 12,
div(style = "height:20px; font-size:35px;",
'Approval Request Summary'))
)
)
shinyApp(ui, server = function(input, output) {})
Related
I am trying to position a tooltip to the right of a textInput using the tippy package, however, it isn't working:
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
with_tippy(textInput("input", "input with tooltip"), "Input text", placement = "right")
),
server = function(input, output) {}
)
The position = 'right', arrow = 'true' and theme = 'light' options also don't seem to be working.
I was wondering if this was a browser compatibility issue or if I'm missing some CSS dependencies on my end? I have tried running the app on Chrome v82.0.4068.5, Firefox 73.0.1 and Microsoft Edge 44.18362.449.0 to no avail.
Your code doesn't run because with_tippy is not a valid function.
The code below should properly show the position of the tooltip. Important to note: the tippy_this(elementId) refers back to the textInput(inputId) named THISinput here for clarity.
Instead of actually wrapping the textInput in the tippy_this, we just refer back to the input with elementId.
library(shiny)
library(tippy)
shinyApp(
ui = fluidPage(
textInput(inputId = "THISinput", "input with tooltip"),
tippy_this(elementId = "THISinput", tooltip = "Hovertext for 'THISinput' here", placement="right")
),
server = function(input, output) {}
)
So my question is very related to this one : R shinyDashboard customize box status color
However, the problem is that the provided solution does not add an available color but only replace an existing one. Thus, we are limited to only 5 colors for boxes in one shiny apps. In other words, I would like to add a customized color while keeping the existing ones
So i thought about a similar solution but it didn't work...
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-primary2>.box-header {
color:#fff;
background:#666666
}
.box.box-solid.box-primary2{
border-bottom-color:#666666;
border-left-color:#666666;
border-right-color:#666666;
border-top-color:#666666;
}
")),
fluidRow(
box(width = 6, title = "youhou", status = "primary2", solidHeader = TRUE,
"Box content"
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Error in validateStatus(status) :
Invalid status: primary2. Valid statuses are: primary, success, info, warning, danger.
The below is a hacky way of doing it. Essentially you need to create a custom div and use it's id tag so that the css styling takes precedence over the original box styling and use renderUI to generate this new custom box.
However, you also do not want to inadvertently style the other box so you use the id to apply the styling specifically to your box of choice.
Finally you use uiOutput and renderUI on the server side to create this new div and the respective styled box.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
"Box content"
),
uiOutput("primary2")
)
)
)
server <- function(input, output) {
output$primary2 <- renderUI({
tags$div(class = "another-box", id = "primariy2",
box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
"Box content"
),
tags$style(HTML("
#primariy2 .box.box-solid.box-primary>.box-header {
color:#fff;
background:#666666
}
.box.box-solid.box-primary {
border-bottom-color:#666666;
border-left-color:#666666;
border-right-color:#666666;
border-top-color:#666666;
}
"))
)
})
}
I want to know if it is possible to create pdf viewer element in R Shiny and change it reactively.
Example:
I have a list of pdf files in folder. Now pdf element should view the selected file and change dynamically with the input.
I have tried this using iframe but it does not change dynamically .Also pdf file should be present in www directory of shiny app....
tags$iframe(src='highl.pdf', height=550)
Can anyone help me to achieve this incase possible ?
I think you probably put the html tags in the ui section, something like this:
ui <- fluidPage(
sidebarLayout(
sidebarPanel( selectinput(inputId = "pdf_selection", .. other stuff ..) ),
mainPanel( tags$iframe(src = input$pdf_selection, height = 550) )
)
)
server <- function(input, output) { .. other stuff .. }
To render the PDF viewer dynamically by the reactive input, you should render it within the server section like:
ui <- fluidPage(
sidebarLayout(
sidebarPanel( selectinput(inputId = "pdf_selection", .. other stuff ..) ),
mainPanel( uiOutput("pdf_viewer") )
)
)
server <- function(input, output) {
output$pdf_viewer <- renderUI( tags$iframe(src = input$pdf_selection, height = 550) )
}
I would like to customize the color of the box status of my shiny app.
I find a css way to change the box background color of these box but not to customize the status color, but I do not see the equivalent argument of "status" in css?
I thus print the source code of a simple page containing the considered argument "status" and I was lookin at its class (I think class="box box-solid box-primary") but I do not manage to reach it in the several .css provided in this webpage... :(
Do you have an idea ?
Here is this simple code :
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
"Box content"
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Thank you in advance for any help !
Cha
I finally found the answer (long and tough but always gratifying :D)
One of my friend (Thank you so much my friend !!!) shows me how to display all css parameters of each element of a web page (and particularly of a shiny page: go to the appropriate page and right click, something like "examine the element"!!
So AMAZING !!
Then, I look deeper (very very very deeper, there is so much classes !!) and I managed to access to any css parameter of the boxes !
Here is the code for the next people :
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-primary>.box-header {
color:#fff;
background:#666666
}
.box.box-solid.box-primary{
border-bottom-color:#666666;
border-left-color:#666666;
border-right-color:#666666;
border-top-color:#666666;
}
")),
fluidRow(
box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
"Box content"
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Have a good week-end !!
Cheers !
This is brilliant and worked really well for me! I just wanted to add that there is a small bit of code you can add if you want to be able to use the new color with solidHeader = FALSE (to get at Dmitri's question). You need to change the color of the text in the header (I am now using black) and my new 'status' is purple. Here is an example below (where I am replacing the danger status rather than primary):
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-danger>.box-header {
color:#fff;
background:#9966ff
}
.box.box-solid.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
}
.box.box-danger>.box-header {
color:#000000;
background:#fff
}
.box.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
}
")),
fluidRow(
box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
"Box content"
)
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
(I found the right argument for this kind of box by following the OP's instructions to display all the css parameters.)
As I was trying to change the status color for hours now, I think I'd share my solution here, if anyone ever runs into the same problem again.
I was trying to edit the CSS code in a dedicated CSS file but that was not working. But when I added the CSS code directly into the shiny app file via tags$style (like the solutions provided by Charlotte Sirot and Michelle Ross) it worked.
Could have something to do with prioritizing the source of CSS style code, and directly adding the code with tags$style overrides all other sources.
I'm just building from #Michelle Ross and #Charlotte Sirot excellent answers and hoping that someone else also will benefit from this variation: I wanted to customize different colors for different statuses, here I chose "danger" and "info". I also wanted the box content background to be filled with color. To acheive that I used the following code:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-danger>.box-header {
color:#9966ff;
background:#9966ff
}
.box.box-solid.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
}
.box.box-danger>.box-header {
color:#fff;
background:#9966ff
}
.box.box-danger{
border-bottom-color:#9966ff;
border-left-color:#9966ff;
border-right-color:#9966ff;
border-top-color:#9966ff;
background: #9966FF;
}
.box.box-solid.box-info>.box-header {
color:#000000;
background:#FFAE66
}
.box.box-solid.box-info{
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
}
.box.box-info>.box-header {
color:#fff;
background:#FFAE66
}
.box.box-info{
border-bottom-color:#FFAE66;
border-left-color:#FFAE66;
border-right-color:#FFAE66;
border-top-color:#FFAE66;
background: #FFAE66;
}
")),
fluidRow(
box(width = 6, title = "youhou", status = "danger", solidHeader = FALSE,
"Box content"
),
box(width = 6, title = "Hanna", status = "info", solidHeader = F,
"blabla")
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
And generated a shinydashboard with boxes like this:
I want to scale a shiny plot to the height of the window. This related SO question only uses absolute height specifications in pixels, when a height = 100% would be preferable. I note in the documentation that absolutePanel can achieve this with its top, bottom, left, right arguments, but then you lose the side panel, and in any case the plot (while scaling to width) seems to ignore available height.
I'm guessing this relates to the html quirk that means you need to get the height with javascript innerHeight variable. But I'm unclear how to implement a solution in shiny to get ui.R to utilise this. Grateful for any pointers.
A basic app model for development:
ui.R
library(shiny)
shinyServer(
function(input, output) {
output$myplot <- renderPlot({
hist(rnorm(1000))
})
}
)
server.R
library(shiny)
pageWithSidebar(
headerPanel("window height check"),
sidebarPanel(),
mainPanel(
plotOutput("myplot")
)
)
Use CSS3. Declare your height in viewport units http://caniuse.com/#feat=viewport-units .
You should be able to declare them using the height argument in plotOutput however shiny::validateCssUnit doesnt recognise them so you can instead declare them in a style header:
library(shiny)
runApp(
list(server= function(input, output) {
output$myplot <- renderPlot({
hist(rnorm(1000))
})
}
, ui = pageWithSidebar(
headerPanel("window height check"),
sidebarPanel(
tags$head(tags$style("#myplot{height:100vh !important;}"))
),
mainPanel(
plotOutput("myplot")
)
)
)
)
This wont work in the shiny browser but should work correctly in a main browser.