Creating stylish action buttons in R Shiny using a customized CSS template

Question

Creating stylish action buttons in R Shiny using a customized CSS template

I am looking to customize the layout of an actionButton in a Shiny app using a CSS file. The action button is defined in server.R and used as uiOutput() in ui.R as shown below:

server.R

shinyServer(function(input, output) {
  output$ActionButtonExample <- renderUI({
      actionButton(
      inputId = "ActionButtonExample",
      label = "Accept",
      icon = icon("check"),
      width = '50%',
      style = 'float:right;'
    )
  })

})

ui.R

# Define UI for application that draws a histogram
shinyUI(fluidPage(

  # Application title
  titlePanel("Old Faithful Geyser Data"),

  # Sidebar with a slider input for number of bins 
  sidebarLayout(
    sidebarPanel(
       sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30)
    ),

    # Show a plot of the generated distribution
    mainPanel(
       uiOutput("ActionButtonExample")
    )
  )
))

Can someone provide guidance on how to customize the button using CSS similar to the example provided here: ?

jquery html css r shiny

Answer 1

Answer №1

Here's a practical illustration for implementing the button feature, with the checkboxInput following a similar process. Keep in mind that the input elements are generated server-side using uiOutput and renderUI, which means they are actually created by JavaScript on the user’s browser after the HTML document loads. Therefore, trying to use $(document).ready() or $(window).load() won't be effective. The steps outlined below illustrate how to achieve this:

Upon the window load event, utilize setInterval to consistently check the page every 0.1 seconds to verify if the button has been rendered.
Once the button becomes visible, stop the polling mechanism.
Locate the button by its ID, and eliminate the default btn-default class (as it would render the button text in black, making it illegible).
Add the necessary 3D classes to enhance the visual appearance of the button.

Snippet

library(shiny)

ui <- shinyUI(fluidPage(
  includeCSS("www/btn3d.css"),

  titlePanel("Demo Example"),

  sidebarLayout(
    sidebarPanel(
      uiOutput("button"),
      tags$head(tags$script(HTML("
         $(window).load(function() {
            var i = setInterval(function() {
              if ($('#buttonid').length) {
                clearInterval(i);
                $('#buttonid').removeClass('btn-default').addClass('btn3d btn-primary');
              }
            }, 100);
         });
      ")))
    ),

    mainPanel(

    )
  )
))

server <- shinyServer(function(input, output, session) {

  output$button <- renderUI({
    actionButton("buttonid", "buttonname")  
  })

})

shinyApp(ui = ui, server = server)

Answer 2

Here's a practical illustration for implementing the button feature, with the checkboxInput following a similar process. Keep in mind that the input elements are generated server-side using uiOutput and renderUI, which means they are actually created by JavaScript on the user’s browser after the HTML document loads. Therefore, trying to use $(document).ready() or $(window).load() won't be effective. The steps outlined below illustrate how to achieve this:

Upon the window load event, utilize setInterval to consistently check the page every 0.1 seconds to verify if the button has been rendered.
Once the button becomes visible, stop the polling mechanism.
Locate the button by its ID, and eliminate the default btn-default class (as it would render the button text in black, making it illegible).
Add the necessary 3D classes to enhance the visual appearance of the button.

Snippet

library(shiny)

ui <- shinyUI(fluidPage(
  includeCSS("www/btn3d.css"),

  titlePanel("Demo Example"),

  sidebarLayout(
    sidebarPanel(
      uiOutput("button"),
      tags$head(tags$script(HTML("
         $(window).load(function() {
            var i = setInterval(function() {
              if ($('#buttonid').length) {
                clearInterval(i);
                $('#buttonid').removeClass('btn-default').addClass('btn3d btn-primary');
              }
            }, 100);
         });
      ")))
    ),

    mainPanel(

    )
  )
))

server <- shinyServer(function(input, output, session) {

  output$button <- renderUI({
    actionButton("buttonid", "buttonname")  
  })

})

shinyApp(ui = ui, server = server)

Creating stylish action buttons in R Shiny using a customized CSS template

Answer №1

Similar questions

Is it possible to include edit links to local files in an HTML report that I am creating?

Tips for adjusting $(document).height() to exclude the height of hidden divs

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

Customize material-ui button designs using styled-components

The bottom section is not displaying properly at the conclusion of the div slide

Error encountered: Index 109 - The function $.ajax(...).success is not recognized as a valid function while working with jQuery in a Node

Identify all elements that possess a specific attribute with a precise value in jQuery, and return either true or false

Adjusting the positioning of links with bootstrap scrollyspy

What is the method for normalizing data in R prior to conducting regression analyses with R?

Populate a form with data retrieved from a MySQL query result

numbered navigation jquery plugin

Utilizing Jquery to Swap Text with Elements from an Array

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

The personalized directive does not respond to modifications in attributes

The UI-SELECT feature in angular-js does not seem to be displaying

Troublesome display problem with photo gallery

Display the div only if the content matches the text of the link

Ensuring the accuracy of HTML sliders

The function driver.find_element is unable to locate an element using the "class_name" attribute

Clearly defined form field even with the inclusion of value=" "