Question

我是JS新手，偶然发现了我无法解决的第一个非常简单的问题。

我正在制作一个简单的网站（带有在线编辑器），并希望添加一个聊天框。我从shoutbox.com得到了一个

要使用它，我必须将其嵌入到工作正常的html框中。问题是，水平滚动条在html框出现。我希望它消失了。我试图用html正文代码将其隐藏，但没有成功。增大html-box的大小只是将shoutbox拉伸，滚动条将保持不变。

swoutbox ist的宽度设置为100％，高度设置为360px 在shoutbox.com上可以同时更改两者，但是只显示一半，我不知道该放在哪里。

这是Shoutbox的代码：

library(shiny)
library(Rcpp)
library(ggmap)
library(htmlwidgets)
library(leaflet)

crime2 <- crime[1:50,]

ui <- fluidPage(
  titlePanel("Unusual Observations"),

  sidebarLayout(
    sidebarPanel(
      helpText("Create maps with 
        information from the Crime Data"),

      selectInput("var", 
              label = "Choose a variable to display",
              choices = c("Hour",
                          "Number"),
              selected = "Hour"),

      sliderInput("range", 
              label = "Range of interest:",
              min = 0, max = 10, value = c(1, 2))
    ),

    mainPanel(leafletOutput("map"))
  ),

  verbatimTextOutput("stats")
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    data <- switch(input$var,
               "hour" = crime2$hour,
               "number" = crime2$number)

    getColor <- function(data){sapply(data, function(var){
       if(input$var< input$range[1]) {
         "green"
       } else if(input$var <= input$range[2]) {
         "orange"
       } else {
         "red"
        } })
    }

  icons <- awesomeIcons(
  icon = 'ios-close',
  iconColor = 'black',
  library = 'ion',
  markerColor = getColor(crime2)
)

    leaflet(crime2) %>%
      addTiles() %>%
      addAwesomeMarkers(~lon, ~lat, icon=icons)

  })

  output$stats <- renderPrint({
    with(crime2, tapply(input$var, list(type), summary))
  })
}

shinyApp(ui=ui, server=server)

常见问题解答说

更改宽度：将聊天嵌入到具有您选择的宽度的元素中。

要更改高度：在.shoutBoxContainer CSS上

并举一个例子：

<script src="https://www.shoutbox.com/chat/chat.js.php"></script><script> var chat = new Chat(112308);  </script></body></style>

我想将喊话框的宽度设置为90％，以查看是否可以解决问题。

我的问题：如何？

Answer 1

如果您有css文件，则只需将其添加到文件底部即可。

.shoutBoxContainer {
   height:450px;
   width:90%;
}

如果不这样做，则以样式标签将其添加到<head> 没有CSS文件，您的代码将如下所示：

<head>
<script src="https://www.shoutbox.com/chat/chat.js.php"></script>
<style> 
   .shoutBoxContainer {
      height:450px;
      width:90%;
   }
</style>
</head>
<body>
   <script> var chat = new Chat(112308);  </script>
</body>

确保在chat.js.php文件之后加载了CSS。

具有高度和宽度的Java脚本

1 个答案: