CODEWITHSUNDEEP
rshiny
Antonio
Antonio

Reputation: 1111

How to insert banner along with the text in shiny app

How do I insert a banner along with my text I have in my APP? I saw an app that did this, I will insert the image below. The link to access this APP is:https://shiny.rstudio.com/gallery/lego-mosaic.html

Notice it has the text and a blue banner. I would like to do something similar to this. Can you help me?

Thank you very much!

Executable code below:

library(shiny)

ui <- shiny::navbarPage(
  title="Test", collapsible = TRUE,
  
  tabPanel("",
           
           br(),
           hr(),
           
           h2(HTML("Project <b>Description</b>"), 
              style="text-align:center; color: blue;"),
           hr(),
           div(
             style = "width: 75%; margin: auto;",
             h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                      when an unknown printer took a galley of type and scrambled it to make a type 
                                      specimen book. It has survived not only five centuries, but also the leap into electronic 
                                      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of 
                                      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
                                      like Aldus PageMaker including versions of Lorem Ipsum"),
                style="text-align:center"),
             h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                      when an unknown printer took a galley of type and scrambled it to make a type 
                                      specimen book. It has survived not only five centuries, but also the leap into electronic 
                                      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of 
                                      Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
                                      like Aldus PageMaker including versions of Lorem Ipsum"),
                style="text-align:center"))
  )
)




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

shinyApp(ui = ui, server = server)

enter image description here

Upvotes: 0

Views: 1109

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84599

It's not entirely clear what you want. What about that:

library(shiny)

ui <- fluidPage(
  div(
    style = 
      "height: 80px; background-color: blue; width: 100%; position: absolute; right:0;",
    div(
      style = "height: 100%; background-color: cyan; position: relative; width: fit-content;",
      tags$p(
        "Here some text vertically centered", 
        style = 
          "position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding-right: 10px; padding-left: 10px;"
      )
      
    )
  )
)

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

shinyApp(ui, server)

Upvotes: 1

Related Questions