Antonio
Antonio

Reputation: 1111

How to adjust margin breaks in a Shiny app

Could you help me adjust my app's margin? I insert below an executable code and also an image to show where it needs to be supported.

Thank you very much!

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
  title="Test", collapsible = TRUE,
  
  tabPanel("",
           
           div(
             style = 
               "height: 80px; background-color: #02BE7F; width: 100%; position: absolute; right:0;",
           h2(HTML("Project <b>Description</b>"), 
              style="text-align:center;color: white"),
           hr(),
           
            div(
             style = "width: 70%; 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"), 
                                      style="text-align:justify"))
)

))



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

shinyApp(ui = ui, server = server)

enter image description here

Upvotes: 0

Views: 1872

Answers (1)

lz100
lz100

Reputation: 7340

just do this

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                        title="Test", collapsible = TRUE,
                        
                        tabPanel("",
                                 
                                 div(
                                     style = 
                                         "height: 80px; background-color: #02BE7F; width: 100%; position: absolute; right:0;",
                                     h2(HTML("Project <b>Description</b>"), 
                                        style="text-align:center;color: white"),
                                     hr(),
                                     
                                     div(
                                         style = "width: 70%; 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"), 
                                      style="text-align:justify")),
                                     tags$style(".navbar {margin-bottom: 0;}")
                                 )
                                 
                        ))



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

shinyApp(ui = ui, server = server)

enter image description here

Upvotes: 1

Related Questions