Change background color of two div inside one div R Shiny

Question

I'd like to change background color of one div which has two div´s inside.

I have written in the UI:

div(
       div(fileInput(inputId = "file1",
                     label = "File 1"),
           style="min-width:200px;max-width:45%; float:left; margin-right:2.5%;"),
                             
       div(fileInput(inputId = "file21",
                     label = "File 2,1"),
           fileInput(inputId = "file22",
                     label = "File 2,2"),
           style="min-width:200px;max-width:45%; float:left;"),
   style = "width: 100%; background-color:#ADD8E6;"),

But the color does not change. When I change background-color to each separate div it does work. But it does not look nice. That's why I want to change background-color in the bigger div.

Any idea?

Maybe the ir another way to achieve this though.

Answer 1

Either you need to give that parent container div a height or you style the fluidPage / fluidRow containing it:

library(shiny)

ui <- fluidPage(
  div(
    div(fileInput(inputId = "file1",
                  label = "File 1"),
        style="min-width:200px;max-width:45%; float:left; margin-right:2.5%;"),
    
    div(fileInput(inputId = "file21",
                  label = "File 2,1"),
        fileInput(inputId = "file22",
                  label = "File 2,2"),
        style="min-width:200px;max-width:45%; float:left;"),
    # style = "width: 100%; background-color:#ADD8E6;") # height: 500px;
  ),
  style = "width: 100%; background-color:#ADD8E6;"
)

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

shinyApp(ui, server)