Adjust image that is shown by showModal on Shiny

问题

I would like assistance with two brief questions involving my shiny application. My executable app below is generating an initial message through showModal. However, as you can see the attached image, the logo was disproportionate to the message box, could you help me to solve this ?? I also insert the .html file that I made to show the initial message. In addition, if possible, I would like to activate my button that I called "ok", so that the message comes out, and the user can continue with the functions of the application.

Thank you!

library(shiny)
library(ggplot2)
library(shinythemes)
library(rdist)
library(geosphere)
library(rgdal)

function.cl<-function(df,k){
  
  #clusters
  coordinates<-df[c("Latitude","Longitude")]
  d<-as.dist(distm(coordinates[,2:1]))
  fit.average<-hclust(d,method="average") 
  clusters<-cutree(fit.average, k) 
  nclusters<-matrix(table(clusters))  
  df$cluster <- clusters 
  
  #all cluster data df1 and specific cluster df_spec_clust
  df1<-df[c("Latitude","Longitude")]
  df1$cluster<-as.factor(clusters)
  
  #Colors
  my_colors <- rainbow(length(df1$cluster))
  names(my_colors) <- df1$cluster
  
  #Scatter Plot for all clusters
  g <- ggplot(data = df1,  aes(x=Longitude, y=Latitude, color=cluster)) + 
    geom_point(aes(x=Longitude, y=Latitude), size = 4) +
    scale_color_manual("Legend", values = my_colors)
  plotGD <- g
  
  
  return(list(
    "Plot" = plotGD
  ))
}

ui <- bootstrapPage(
  navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
             "Cl", 
             tabPanel("Solution",
                      fileInput("data", h3("Excel import")), 
                      sidebarLayout(
                        sidebarPanel(
                          
                          sliderInput("Slider", h5(""),
                                      min = 2, max = 4, value = 3),
                        ),
                        mainPanel(
                          tabsetPanel(      
                            tabPanel("Solution", plotOutput("ScatterPlot"))))
                        
                      ))))

server <- function(input, output, session) {
  
  v <- reactiveValues(df = NULL)
  observeEvent(input$data, {
    v$df <- read_excel(input$data$datapath)
  })
  
  
  Modelcl<-reactive({if (!is.null(v$df)) {
    function.cl(v$df,input$Slider)
  }
  })
  
  
  output$ScatterPlot <- renderPlot({
    Modelcl()[[1]]
  })
  
  observeEvent("", {
    showModal(modalDialog(
      includeHTML("test.html"),
      easyClose = TRUE,
      footer = tagList(
        actionButton(inputId = "ok", label = "OK"))
    )
    )
  })
  
}

shinyApp(ui = ui, server = server)

test.html

<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://img.ibxk.com.br/2018/08/10/10125357204122.jpg?w=1120&h=420&mode=crop&scale=both" /></p>
<h1 style="text-align: center;">Welcome to the test &nbsp;<strong>Application</strong></h1>
<hr />
<p style="text-align: left;">TEXT TEXT TEXT TEXT TEXT TEXT TEXT................................................... </p>

回答1:

You can use CSS to force the image to be no more than 100% of its container's width. There are many ways to achieve this. For example, you can add the following one line anywhere in the UI:

tags$head(tags$style("#shiny-modal img { max-width: 100%; }")),

来源：https://stackoverflow.com/questions/62611894/adjust-image-that-is-shown-by-showmodal-on-shiny

标签

Shiny