Positioning the text within Action Button in R shiny - html

I want to fit Resource Activity text within the given button such that Activity comes below the Resource in the button. Currently the complete word gets hidden because of less space of the button and I do not want to increase the space. Please help.
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
actionButton("buttonresinvthree", "Resource Activity",style="color:
#000000; width:8%; ")
)
)
server <- function(input, output) { }
shinyApp(ui, server)

The following works for me:
## app.R ##
library(shiny)
library(shinydashboard)
library(tableHTML)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$head(tags$style(make_css(list('.btn', 'white-space', 'pre-wrap')))),
actionButton("buttonresinvthree", HTML("Resource\nActivity"),
style="color: #000000; width:8%; ")
)
)
server <- function(input, output) { }
shinyApp(ui, server)
I added tags$head... to add CSS to the button (class btn) and used \n for the break line between Resource\nActivity.
The result looks like this:

Set white-space to normal:
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
actionButton("buttonresinvthree", "Resource Activity",style="color:
#000000; width:8%;white-space:normal;font-size:.8vw;")
)
)
server <- function(input, output) { }
shinyApp(ui, server)

Related

How to add tabulation to a line using htmlOutput()?

I want to add one tabulation to a line in Shiny but I don't find the way to do it.
I know that there are HTML tags in Shiny such as strong to put words in bold, small to make them smaller... Even blockquote to add blocks of quotes.
But I didn't find one to add one tabulation.
Does anyone know how to do it?
Reproducible code:
library(shiny)
ui = pageWithSidebar(
headerPanel("My app"),
sidebarPanel(
),
mainPanel(
htmlOutput("text")
)
)
server = function(input, output) {
output$text <- renderUI({
str1 <- strong("This is the first line in bold:")
str2 <- em("This is the second line in italics and with one tabulation")
HTML(paste(str1, str2, sep = '<br/>'))
})
}
shinyApp(ui,server)
You can add a style attribute to each shiny-tag:
library(shiny)
ui = pageWithSidebar(
headerPanel("My app"),
sidebarPanel(),
mainPanel(
htmlOutput("text")
)
)
server = function(input, output) {
output$text <- renderUI({
tag1 <- p(strong("This is the first line in bold:"))
tag2 <- p(em("This is the second line in italics and with one tabulation"), style = "text-indent: 1em;")
HTML(paste(tag1, tag2, sep = '<br/>'))
})
}
shinyApp(ui,server)
You could do it just using html code instead of the r tags from shiny:
library(shiny)
ui = pageWithSidebar(
headerPanel("My app"),
sidebarPanel(
),
mainPanel(
htmlOutput("text")
)
)
server = function(input, output) {
output$text <- renderUI({
str1 <- "<p><strong>This is the first line in bold:</strong></p>"
str2 <- "<p style='text-indent: 45px'><em>This is the second line in italics and with one tabulation</em></p>"
HTML(paste(str1, str2, sep = ''))
})
}
shinyApp(ui,server)
unless I have misunderstood what you're trying to do.

Add Uicons to Shiny from local file

Looking to add uicons to my Shiny app. I have downloaded the fonts after making an account, and moved the CSS and webfonts to the root directory of my .R file.(per instructions) Now I want to add one of the icons in my infobox in Shiny, I have a very simple example
I think I could use some sort of shiny::tags but not sure which one, or how. I used This Stackoverflow answer to help guide me,
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$i("#import url(/css/uicons-regular-rounded.css);"),
icon("fi fi-rr-camera")
))
server <- function(input, output) { }
shinyApp(ui, server)
Which gives me this
Any help would be appreciated. Thank you.
You need to put all folders including svg folder into www folder in root of your shiny app. Then you can import the icon with tags$img(src='svg/fi-rr-camera.svg')
To use it in info box, simply wrap it with tags$i.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$img(src='svg/fi-rr-camera.svg', height='40', width='40')
infoBox("info","info",icon = tags$i(tags$img(src='svg/fi-rr-camera.svg', height='40', width='40')))
))
server <- function(input, output) { }
shinyApp(ui, server)
As #phago29 mentioned, uicons-regular-rounded.css need to be in a subdirectory inside the project directory (or simply the directory using setwd()).
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(includeCSS('www/uicons-regular-rounded.css'),
tags$i(class = "fi fi-rr-camera")))
server <- function(input, output) { }
shinyApp(ui, server)
reproducible example:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(includeCSS('https://fonts.googleapis.com/icon?family=Material+Icons'),
tags$i(class = "material-icons", "accessibility", style = "font-size: 6em;")))
server <- function(input, output) { }
shinyApp(ui, server)

Plotly does not work in shiny with HTML function

I'm dealing with a quite complicated shiny app in which I would like to create an UI output inside server function. UI is not that easy and depends on many items created on a server side so I'm creating it concatenating HTML parts of UI. Everything works until I meet plotly chart.
I've created a simpler version of my app to make it easier to understand my problem.
Normally I'd do sth like that:
library("shiny")
library("plotly")
library("dplyr")
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
),
mainPanel(
plotlyOutput("distPlot1"),
plotOutput("distPlot2")
)
)
)
server <- function(input, output) {
output$distPlot1 <- renderPlotly({
x <- faithful[, 2]
plot_ly(x = x, type = "histogram")
})
output$distPlot2 <- renderPlot({
x <- faithful[, 2]
hist(x)
})
}
shinyApp(ui = ui, server = server)
to obtain this:
But when I start to create ui on server side like here (edited part with more divs inside ui):
library("shiny")
library("plotly")
library("dplyr")
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
),
mainPanel(
htmlOutput("ui1"),
uiOutput("ui2")
)
)
)
server <- function(input, output) {
output$distPlot1 <- renderPlotly({
x <- faithful[, 2]
plot_ly(x = x, type = "histogram")
})
output$distPlot2 <- renderPlot({
x <- faithful[, 2]
hist(x)
})
output$ui1 <- renderUI({
show <- h1("lfkhg")
show <- paste0(show, plotlyOutput("distPlot1") %>% as.character())
HTML(show)
})
output$ui2 <- renderUI({
show <- h1("lfkhg")
show <- paste0(show, plotOutput("distPlot2") %>% as.character())
HTML(show)
})
}
# Run the application
shinyApp(ui = ui, server = server)
Plotly plot does not appear...
Do you know why and how to deal with this problem?
I dont know why you need %>% HTML() in there as it works for me without it. Also if you want to add more things into the renderUI then simply use tagList and combine them together, here I will add h1 as per your comment
library("shiny")
library("plotly")
library("dplyr")
ui <- fluidPage(
sidebarLayout(sidebarPanel(),
mainPanel(
uiOutput("ui1"),
uiOutput("ui2")
)
)
)
server <- function(input, output) {
output$distPlot1 <- renderPlotly({
x <- faithful[, 2]
plot_ly(x = x, type = "histogram")
})
output$distPlot2 <- renderPlot({
x <- faithful[, 2]
hist(x)
})
output$ui1 <- renderUI({
tagList(h1("lfkhg"),plotlyOutput("distPlot1"))
})
output$ui2 <- renderUI({
plotOutput("distPlot2")
})
}
# Run the application
shinyApp(ui = ui, server = server)

title in tab of browser empty in shiny dashboard page

Though there is the posibility to add a title in a shiny dashboard app, which appears correctly in the app page,
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "my title"),
dashboardSidebar(),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
It does not appear as the name of tab of the browser. As name of tab in browser only appears the URL (like 127...).
You can set the browser page title like this
ui <- dashboardPage(title="Browser title",
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
...

Center align Shiny box header with HTML or CSS

library(shiny)
library(shinydashboard)
filetime <- format(file.mtime("mydata.csv"), format = "%a %e-%b-%Y %r IST")
ui <- dashboardPage(
dashboardHeader(title = "Recruitment"),
dashboardSidebar(),
dashboardBody(
shinyUI(fluidPage(
box(verbatimTextOutput("final_text"), status = "primary", solidHeader = TRUE, collapsible = TRUE, width = 12, title = "Collapsable text")
))))
server <- shinyServer(function(input, output, session) {
output$final_text <- renderText({
HTML(paste("<center>","Last updated at", filetime, "</center>")) #"<font size=\"2\">",
})
}
In the above code the Last updated at and filetime are not getting center aligned, upon further research I found that center tag does not work on HTML5, not sure if that's causing the problem.
As a workaround, I added a div and class to center align the text via css, here is my 2nd attempt.
#Next to fluidPage
tags$style(HTML(".man_made_class{color:#f2f205; text-align: center;}")),
#Then further in Output
output$final_text <- renderText({
HTML(paste("<div class= man_made_class>","Last updated at", filetime, "</div>")) #"<font size=\"2\">",
})
In both my attepmt, I am able to change color, font size, margin etc, but not able to center align the text. Any help?
You don't need to add custom class, as the textOutput already has a unique id final_text. Working example:
library(shiny)
library(shinydashboard)
filetime <- format(file.mtime("mydata.csv"), format = "%a %e-%b-%Y %r IST")
ui <- dashboardPage(
dashboardHeader(title = "Recruitment"),
dashboardSidebar(),
dashboardBody(
shinyUI(fluidPage(
tags$head(tags$style(HTML("
#final_text {
text-align: center;
}
div.box-header {
text-align: center;
}
"))),
box(verbatimTextOutput("final_text"), status = "primary", solidHeader = TRUE, collapsible = TRUE, width = 12, title = "Collapsable text")
))))
server <- shinyServer(function(input, output, session) {
output$final_text <- renderText({
HTML(paste("Last updated at", filetime))
})
})
shinyApp(ui = ui, server = server)
Do this to changes to ui.R and server.R help?
ui.R
library(shiny)
library(shinydashboard)
#filetime <- format(file.mtime("mydata.csv"), format = "%a %e-%b-%Y %r IST")
ui <- dashboardPage(
dashboardHeader(title = "Recruitment"),
dashboardSidebar(),
dashboardBody(
shinyUI(fluidPage(
tags$style(HTML(".man_made_class{color:#f2f205; text-align: center;}")),
box(htmlOutput("final_text"), status = "primary", solidHeader = TRUE, collapsible = TRUE, width = 12, title = "Collapsable text")
))))
server.R
server <- shinyServer(function(input, output, session) {
output$final_text <- renderText({
"<div class= man_made_class>Last updated at xxxx</div>"
})
})