css – Rshiny: backgroud image get cropped at bottom when application is zoomed out to 80%


For a better rendering I added this part

       tags$style("
  body {
  -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
  zoom: 0.8; /* Other non-webkit browsers */
  zoom: 80%; /* Webkit browsers */}
  ")

to my code in order to zoom out my application to 80% in a webpage… It works great but the downside is that my background image gets cropped at the bottom of the page…

Reproductive example:

backgroundImageCSS1 <- "background-image: url('%s');
                       height: 95vh;
                       -webkit-background-size: cover;
                       -moz-background-size: cover;
                       -o-background-size: cover;
                       background-size: cover;
                       margin-left:-1em;
                        margin-right:-1em;
                        margin-top:-1.5em;
                    "

# user interface
ui <- navbarPage(id="navbarid",
                 "Test",  theme = shinytheme("cosmo"),
                 header = tagList(
                   useShinydashboard(),
                   tags$style("
              body {
              -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
              zoom: 0.8; /* Other non-webkit browsers */
              zoom: 80%; /* Webkit browsers */}
              ")
                   # tags$head(tags$style(".modal-dialog {position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%) !important}"))
                 ),
                 
                 tabPanel(
                   "Welcome", value="welcome_page", style = sprintf(backgroundImageCSS1,  "https://i.postimg.cc/WzvLNqH6/Fond-Allier.jpg"),
                   fluidRow(style="padding-top:350px;", tags$head(tags$style(HTML("div.box-header {text-align: center;}"))),
                            column(4),
                            column(4, 
                                   box(width=12,
                                       title = "Welcome", background = "black", tags$head( 
                                         tags$style(HTML(".fa{font-size: 50px;}"))),
                                       fluidRow(br(), align = "center", 
                                                column(6, align = "center", 
                                                       uiOutput("icon1")), 
                                                column(6, align = "center", 
                                                       uiOutput("icon2"))),
                                       fluidRow(column(6, align = "center", style="padding-top:20px;",
                                                       actionButton(inputId = "connect",
                                                                    label = "Log in")),
                                                column(6, align = "center", style="padding-top:20px;",
                                                       actionButton(inputId = "register",
                                                                    label = "Register" 
                                                       ))), br())), column(4))
                 ))

server <- function(input,output) {
}

shinyApp(ui=ui, server=server)

How could I fix that ?



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here