Guide on altering the background color of dynamically generated textboxes in R Shiny

textInput(paste0("inp1-", wid),label = NULL,value = record$Current_week)

This code was used to dynamically generate text input boxes, where the id for each box is determined by a number called wid.

I attempted to change the background color using the following CSS format, but it did not have the desired effect.

tags$head(tags$style(HTML('#',paste0("inp1-", wid),'{background-color:#f1c232;}')))

If you have any suggestions on how to solve this issue, please let me know.

Answer №1

For an illustration of a scenario where the input is not generated dynamically, you can refer to this link. In your particular situation, you may implement the following approach:

library(shiny)

wid=2

ui <- fluidPage(
  uiOutput("my_ui")
)


server <- function(input, output) {

output$my_ui <- renderUI({
tagList(
textInput(paste0("inp1-", wid),label = NULL,value = 0),
tags$style(paste0("#inp1-", wid,"{background-color:#ff0000;}"))
)
})
}

# Launch the application 
shinyApp(ui = ui, server = server)

I hope this explanation is helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Android experiencing issues with dynamically loading Border XML

I am having trouble setting a border dynamically for a RelativeLayout. Oddly enough, when I manually add the border in the activity XML file, it displays perfectly. However, when I try to generate the border dynamically, it doesn't appear. border.xml ...

Guide to centering a button on an image using bootstrap 4

I'm having trouble getting three buttons to align vertically in the center of an image using Bootstrap 4. I've tried using position:relative on the image and position:absolute on the buttons, but it's not working as expected. <div class= ...

The functionality of the Bootstrap navbar-fixed-top seems to be malfunctioning

I am currently working on creating a page layout with a fixed navigation bar positioned at the top. I am aiming for a design similar to the one showcased here. Upon examining the example linked above, it appears that the content of the page begins below t ...

What is the best way to display multiple variables on the x axis along with their corresponding values on the y axis?

I need help with plotting a bar chart in R using a list of variables, each with their own numerical value. How can I label the variables along the x-axis? For example: my_list <- list(a, b, c, d, e, f, g) where a to g represent variables with numeric ...

Issues with CSS not loading properly on EJS files within subdirectories

This is the structure of my folders (with views located in the root directory): views/contractor/auth/login.ejs When I access that file, the CSS styles are not being applied. The connection to the CSS file, which is located in the public directory in th ...

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

Embracing Elegance with jQuery

Is there a way to customize the appearance of my list (<ul>) in the following code snippet? $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; ...

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

I am experimenting with a Bootstrap example featuring a table in the left column and 4 columns in 2 rows in the right column. Check out the code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ...

Include an iframe with hidden overflow specifically for Safari browsers

I have a situation where I'm using a third-party iframe to display specific content. The iframe is enclosed within a div container that has border-radius and overflow: hidden properties applied. Strangely, the content inside the iframe doesn't se ...

Choosing pseudo-elements with CSS styling rules

I have been utilizing the Brave browser to block online ads. However, certain websites have found a way to insert ads into their HTML on the server-side, bypassing my ad-blocking efforts in Brave. Currently, Brave only offers the ability to block elements ...

Activate CSS transition only when not in active state

I have a situation where I want to change the background color immediately upon hovering over an element, and then revert back to the original color when no longer hovering. The CSS for this is straightforward: #el { background-color: black; } #el:hov ...

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

Tips for changing the size of a div using an absolute div position

Is it possible for the #parent div to resize based on the dimensions of the #child div (if the #child div is using position:absolute;)? Similar to how the #t_parent table resizes according to the size of the #t_child table. <div id="parent" style="pos ...

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

Formula for full width skew in three adjacent divs using SkewX() function

.container { height: 500px; width: 500px; position: relative; background: black; } .box { transform: skewX(20deg); width: 33%; height: 100%; position: absolute; } .first-box { background: purple; left: 0; } .second-box { background ...

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

Utilize jQuery to create a login form within a div when triggered by clicking on

I have implemented a jQuery script for login functionality that displays a new div in the center of the page while fading out the rest of the content. It is functioning correctly when I use an anchor tag with the class='login-window' and select i ...

The top navbar does not stay fixed when the page is scrolled

Having some trouble with my navbar. Here is the code I'm using: <nav id="strumenti" class="navbar navbar-expand-sm navbar-light bg-light sticky"> <a class="navbar-brand" href="#"> <img src="C:\Users\Fabry\De ...

I'm having trouble grasping the concept of margin collapse in this particular example

It's clear why the margin collapses to 20px in the first example when there's a border on the outer div. However, it is puzzling how the margin collapses to zero in the second example just by removing the border from the outer div. /*First exam ...

Having trouble hiding the hamburger menu depending on the screen width

I'm trying to figure out how to hide the hamburger menu when the screen width exceeds 400px. You can check out the site at damf.co Currently, the hamburger menu appears when the screen width is less than 400px. If you click on it and then expand the ...