How do I increase the width of the R Shiny notification popup? Right now it's cutting off longer error messages.
library(shiny)
ui <- fluidPage(
actionButton("test", "Test")
)
server <- function(input, output, session) {
observeEvent(input$test, {
showNotification("You did it! Now make me wider", type = "message")
})
}
shinyApp(ui, server)
You can adjust several aspects of the appearance with css
library(shiny)
ui <- fluidPage(
tags$style(".shiny-notification {color: black; background-color: red; border: 1px solid red;padding: 0 50px 0 50px;}"),
actionButton("test", "Test")
)
server <- function(input, output, session) {
observeEvent(input$test, {
showNotification("You did it! Now make me wider", type = "message")
})
}
shinyApp(ui, server)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Related
I am having a shiny app with some ui elements.
Is there a way to replace some HTML (e.g. div / div content) with an animation effect, similar to what shinyjs::show(anim=T) does?
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::html("someDiv", "changed without animation")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
the shinyjs::html doesn't provide this utility. We can write our own js code and use shinyjs::runjs to run it when button is clicked.
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::runjs("$('#someDiv').fadeOut(500, function(){$(this).text('changed without animation').fadeIn();})")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
I want the text in an HTML tag to be different sizes and red.
In this code, the different sizes works, but the red does not.
library(shiny)
ui <- fluidPage(
HTML("<p style=font-size:28px; font-color:red;>Hello</p><p style=font-size:22px>There</p>"),
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
You have to use color:red instead of font-color:red and it has to be before the font-size tag.
This is the corrected code:
library(shiny)
ui <- fluidPage(
HTML("<p style=color:red;font-size:28px; >Hello</p><p style=font-size:22px>There</p>"),
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Is there a way to use a web image as cursor when hovering over a button?
I tried something like this:
tags$head(tags$style(HTML(" .custom { cursor: url(https://c2.staticflickr.com/2/1907/31794847918_04f9e687e1_b.jpg), auto;
} ")))
which has no effect, and I can't find any other examples on the web how to manage this in R shiny.
library(shiny)
ui <- fluidPage(
actionButton(inputId = 'messagebutton', label = 'click me')
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
This example works for me. I think your image isnt working, but I'm not sure why exactly. It might be too big.
library(shiny)
csscode <- HTML("
#messagebutton {
cursor: url(http://www.javascriptkit.com/ajax.gif), auto;
}
")
ui <- fluidPage(
tags$head(tags$style(csscode)),
actionButton(inputId = 'messagebutton', label = 'click me')
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
By default tabs in a tabsetPanel are put on the left. Is it possible to place a tab on the right side, while still having other tabs on the left? So that it looks like this?
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Using float-right should indeed work. The problem with using 2 tabsetPanel is that there are 2 active tabs at the same time.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML(
".tabbable ul li:nth-child(3) { float: right; }"
))
),
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Maybe you can create 2 tabsetPanel and pull one over to the right?
rm(list = ls())
library(shiny)
ui <- fluidPage(
div(style="display:inline-block",tabsetPanel(type = c("pills"),tabPanel("tab_left1"),tabPanel("tab_left2"))),
div(style="display:inline-block;float: right",tabsetPanel(type = c("pills"),tabPanel("tab_right")))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
When you apply the class float-right to the ones you want to float to the right, it should do the trick.
How to edit the CSS to change the width of the progress-bar?
I put in
div.progress-bar{
width:100px
}
progress-bar{
width:100px
}
but it doesn't work.
Your bar has an Id = file1_progress so you can style that. Have a look at my example below, I set mine to 100px
rm(list = ls())
library(shiny)
ui <- fluidPage(
titlePanel("My R Shiny App"),
sidebarPanel(
fileInput('file', 'Choose file to upload.' ),width=3),
tags$style(type="text/css", "#file_progress { max-width: 100px; }")
)
server <- function(input, output, session) {}
shinyApp(ui, server)