Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 73796

Cannot fix location of footer in RShiny app using CSS

$
0
0

I'm trying to add a footer to my Shiny application in which I can write some notes and version details, however, the I can't seem to get the footer in the desired position. I'm using the class .sticky_footer

Please see CSS below:

/* Container holding the image and the text */
.container {
  position: relative;
  width: 1250px;
  height: 300px;
  right: 15px;
}

/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  left: 30px;
  background-color: rgba(0, 0, 0, 0.3); 
  font-family: 'Ubuntu', sans-serif;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.jag-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.sticky_footer { 
  position:relative; 
  bottom:0; 
  right:0; 
  left:0; 
  background:#3c8dbc; 
  z-index: 1000; 
  opacity: 0.9; 

}

I am then using tags$div(class = "sticky_footer", p("test footer") within app.R which produces the following. The yellow box is where I want the footer to appear.

enter image description here

The code for the Shiny app is thus:

  sidebarLayout(
    sidebarPanel(
      code("To begin using the calculator, please enter the required information below:"),
      tags$p(),

      column(width = 12, authDropdownUI("auth_dropdown", 
                                        inColumns = FALSE)),


        textInput("text", label = h5(strong("Page to be tested")), value = "Enter full page URL..."),

    hr(),
    fluidRow(column(3, verbatimTextOutput("value")
    )
    ),


    sliderInput("upliftInput", "Select Desired Uplift", min = 1, max = 10,
                value = 2, post = "%"),

    actionButton("exe", "Run Calculator", 
                 style="color: #fff; background-color: #337ab7; border-color: #2e6da4")


    ),



  mainPanel(
    plotlyOutput("trend_plot"),
    tags$div(class = "sticky_footer", p("test footer")
        )
    )
  ))

I think the issue might be due to the placement of the sidebar panel which makes it appear as though the page is longer than it actually is but regardless, I need the footer to be positioned in line with the bottom of the sidebar panel.

Thanks in advance.


Viewing all articles
Browse latest Browse all 73796

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>