add CSS class to shiny textOutput

shiny add class to element
shiny-text output example

I need to add a CSS class to a series of textOutput in a shiny app.

When I try, e.g.:

textOutput('text', class = 'error')

I get:

Warning: Error in textOutput: unused argument (class = "error")

It is possible to alter the CSS of the id of that textOutput. However, my ids are generated dynamically, so that is not a good solution. A possible alternative would be to 'grab' all ids that begin with/contain "error" (e.g. "error1", "error2"), but I am not sure if this is possible within my CSS style sheet.

Maybe wrapping it in a div with the required class helps?:

library(shiny)

ui <- fluidPage(tags$div(id = 'wrap_div',
                         class = 'error',
                         textOutput('text')))

server <- function(input, output, session) {
  output$text <- renderText ({
    "My text"
  })
}

shinyApp(ui = ui, server = server)

textOutput, Examples. h3(textOutput("caption")). <h3> <div id="caption" class="shiny-text-​output"></div> </h3>. © Copyright 2017 RStudio Inc. Style your apps with CSS. 1. Add style sheets with the www directory. These two ‘New Application’ Shiny apps are identical, except for the appearance of the UI. The 2. Add CSS to your HTML header. 3. Add styling directly to HTML tags.

The various *Output functions return objects with attributes you can manipulate, class among them -- just inspect their structure with the str() function:

foo <- textOutput("foo")
print(foo)
# <div id="foo" class="shiny-text-output"></div>
str(foo)
# List of 3
#  $ name    : chr "div"
#  $ attribs :List of 2
#   ..$ id   : chr "foo"
#   ..$ class: chr "shiny-text-output"
#  $ children: list()
#  - attr(*, "class")= chr "shiny.tag"

This means that we can overwrite the class set by the textOutput function like so:

foo$attribs$class <- "foo bar"
print(foo)
# <div id="foo" class="foo bar"></div>

If you want to preserve existing classes while adding new ones, you can use the paste() function, and wrap it all in a custom add_classes() function for convenience:

add_classes <- function(el, classes) {
  el$attribs$class <- paste(el$attribs$class, classes)
  el
}

foo <- add_classes(foo, "baz qux")
print(foo)
# <div id="foo" class="foo bar baz qux"></div>

Text Output, An expression that returns an R object that can be used as an argument to cat . env preserved) and should have the CSS class name shiny-text-output . A text output element that can be included in a panel. Details. Text is HTML-escaped prior to rendering. This element is often used to display renderText output variables.

The answer is to use a CSS selector like:

[id^="error"] {
   ...
}

This is placed within your external css file within the app directory...usually named style.css.

shiny-text-output and pre tag · Issue #132 · rstudio/shiny · GitHub, It seems shiny-text-output works only with pre tag With the following code it works​. output$myID <span id="myID" class="shiny-text-output badge"></span> I put Bootstrap 2.3.1 and the extra css code into a branch at  A text output element that can be included in a panel. Render a reactive output variable as text within an application page. The text will be included within an HTML div tag by default. Text is HTML-escaped prior to rendering. This element is often used to display renderText output variables. h3(textOutput("caption"))

Style your apps with CSS, Add style sheets with the www directory; Add CSS to your HTML header; Add Note: The Shiny UI is built with the Bootstrap 3.3.1 HTML/CSS framework. to your document's name or; include the file with the tags object. The corresponding HTML output tag can be anything (though pre is recommended if you need a monospace font and whitespace preserved) and should have the CSS class name shiny-text-output. The result of executing func will passed to cat , inside a utils::capture.output() call.

Customize your UI with HTML, Many Shiny apps come with a ui object that determines the layout of to add custom HTML that is not provided by the usual Shiny functions. The user-interface (UI) of a Shiny app is web document. Shiny developers can provide this document as an index.html file or assemble it from R code in their ui object. The UI calls R functions that output HTML code. Shiny turns this code into a web app. I will use the 01_hello app throughout this article as an example.

classFuncs: Add/remove CSS class in shinyjs: Easily Improve the , classFuncs: Add/remove CSS class. In shinyjs: Easily Improve the User Experience of Your Shiny Apps in Seconds. Description Usage Arguments Note See Also  In this post I’ll give you a little overview of CSS and I’ll discuss adding CSS to R Shiny. In my future article I’ll compare SASS and CSS, and I’ll show you how you can use SASS in R. So, R Shiny provides scalability, fast prototyping, and power, but without CSS, it looks like this:

Comments
  • Do any of the classFunc functions from shinyjs help with this situation? rdrr.io/cran/shinyjs/man/classFuncs.html
  • Could you please expand this answer ? Where do you put this code ? The full code would be appreciated.