CODEWITHSUNDEEP
htmlcssrshiny
yholtz
yholtz

Reputation: 93

Add background image to specific tabPanel in Shiny

I use a navbarPage in my shiny application. It permits to create 2 tabpanels. I would like to custom the background of the first tabpanel ONLY.

The best option I found yet consists to create a specific style ("my_style_1") with the tag argument. And then apply it to tabpanel 1 only. My Ui.R code looks like that:

library(shiny)
shinyUI(navbarPage(

    # --- Application name
    "my application",

    # --- Creation of a style named my_style_1
    tags$head(
        tags$style(HTML(".my_style_1{ 
                background-image: url(http://papillondamour.p.a.pic.centerblog.net/fb850229.jpg );
    }"))),

    # --- Sheet number 1 wih custom style
    tabPanel( title="Page1" ,
            column(10,
                class="my_style_1",
                br(),br(),br(),h1("A piece of text"),br(),br(),br()
            )),

    # --- Sheet number 2
    tabPanel( title="Page2" ,
            column(10,
                "Another piece of text"
                ))
            ))

And the most basic server.R you can do:

library(shiny)
shinyServer(function(input, output) {})

It almost work as you can see here. But the image cover only the area of "column", it is not a real background.

If I wanted to apply the same background to every tabPanels, I could just do

    tags$head(
        tags$style(HTML("body{ 
                background-image: url( http://papillondamour.p.a.pic.centerblog.net/fb850229.jpg );
    }"))),

And I would get this good result: here

Upvotes: 1

Views: 4547

Answers (1)

DeanAttali
DeanAttali

Reputation: 26323

This is a bit hacky, but it could work:

  • to fix the issue of having some space between the navbar and the tab content, you could add .my_style_1 { margin-top: -20px; } (since the navbar has a margin-bottom of 20px)

  • to make the image cover the entire width, the first thing you need to do is make the image full width, so add .my_style_1 { width: 100%; }. Then you need to get rid of the left and right padding of the parent container-fluid, so there are two simple options for that (possibly many more): either do .container-fluid { padding-left: 0; padding-right: 0; } but then you also need to remember this will remove some padding from all other tabs , so you could manually add a padding to the other tabs. Or you could do .my_style_1 { position: absolute; left: 0;. See which one works better for you

Upvotes: 1

Related Questions