Make Shiny Image Fill Width of a Tab Without Affecting Others

[blgarski]

Hello,

I am trying to figure out how to make a background image fill the width of the home tab, be responsive to different screen size, and have no padding/margins on the top or sides of the image. There can be padding/margins below it where there will be text added.

Setting the image style to 0 padding or margin doesn't work because '-container-fluid' overrides it (I think). And if I set the '-container-fluid' padding, it changes all of the tabs in the app. It seems that the '-container-fluid' gets automatically added everywhere in the tab, even without being nested in a fluidPage. Please see below for a small reproducible example. Any help would be greatly appreciated!

thank you

library(shiny)

ui <- navbarPage(title="App",
  tabPanel("Home",
    img(id="homeimg", src = "home.jpg", style = "width: 100%; padding: 0;")
    
  ),
  
  tabPanel("Test",
    fluidRow(
      column(12,
        h1("test")
      )
    )
  )
)

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

shinyApp(ui, server)

[nirgrahamuk]

library(shiny)

ui <- tagList(
  tags$head(tags$style(HTML("
                          body > nav{
                          margin-bottom:0 !important;}
                          body > div.container-fluid{
                          padding:0;}
                            "))),
  navbarPage(
    title = "App",
    tabPanel(
      "Home",
      img(id = "homeimg", src = "https://www.rstudio.com/assets/img/bi-ds-hero-homepage.jpg", style = "width: 100%; padding: 0;")
    ),

    tabPanel(
      "Test",
      fluidRow(
        column(
          12,
          h1("test")
        )
      )
    )
  )
)

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

}

shinyApp(ui, server)

[blgarski]

Hey, this works except that this changes the padding for the other tabs as well. The Test tab is now affected. I am trying to only change the padding for this image on the home tab, nothing else.

thanks.

[nirgrahamuk]

how to add some padding/margin back into 'test'

library(shiny)

ui <- tagList(
  tags$head(tags$style(HTML("
                          body > nav{
                          margin-bottom:0 !important;}
                          body > div.container-fluid{
                          padding:0;}
                          
                         #test_container {
                          margin-top:100px;
                          padding-left:100px;
                          }
                            "))),
  navbarPage(
    title = "App",
    tabPanel(
      "Home",
      img(id = "homeimg", src = "https://www.rstudio.com/assets/img/bi-ds-hero-homepage.jpg", style = "width: 100%; padding: 0;")
    ),

    tabPanel(
      "Test",
      div(
        id = "test_container",
        fluidRow(
          column(
            12,
            h1("test")
          )
        )
      )
    )
  )
)

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

shinyApp(ui, server)

[blgarski]

Thanks! This should work!