闪亮的 HTML 嵌入式 app.R 不接受高度属性 https://mytoybox.online

Posted 2023-03-24

【中文标题】闪亮的 HTML 嵌入式 app.R 不接受高度属性 https://mytoybox.online

【英文标题】：Shiny HTML Embedded app.R Not Accepting Height Attributes https://mytoybox.online

【发布时间】：2020-01-05 00:20:14

【问题描述】：

我有一个在闪亮的服务器My Toy Box 上运行的网页。我希望有一个闪亮的应用程序是 100% 宽和 940 像素高。直到这周，我没有任何问题。现在，当我编织创建主 html 页面的 .Rmd 时，嵌入的 app.R 在侧边栏面板的第一个下拉菜单中被裁剪或裁剪到某个固定的非编码高度。

环境：

Ubuntu 18.4 R 版本 3.6.1 (2019-07-05) RStudio 版本 1.1.423

当我从 r-studio（服务器版本）单击 run app 时，我看到了相同的结果。

虽然，从run app 视图窗口，如果我点击open in browser，我会得到预期的完整应用程序

这是应用程序的 UI 代码。R

ui <- pageWithSidebar(
headerPanel( 
  title = span(img(src="MyToyBox_Logo_5_NoBack.png", width = 40, height = 40), "My Toy Box")
),
sidebarPanel(collapsed = FALSE, width = 3,

  #includeHTML("www/googleAnalytics.html"),

  selectInput(inputId = "distinctSeries", 
              multiple = FALSE,
              label = "Select Series", 
              selected = "The Black Series 6 Inch",
              choices = distinctSeries$seriesName),
  br(),
  uiOutput("figureSelection"),
  br(),
  uiOutput("conditionSelection"),
  br(),
  includeHTML("www/amazonAd.html"),
  includeHTML("www/adSense.html")
),
mainPanel(
  tabsetPanel(
    tabPanel("Series Average Values", 
             includeHTML("www/googleAnalytics.html"), 
             DT::dataTableOutput("seriesAverageValues") %>% withSpinner(color="#0dc5c1")
             ),
    tabPanel("eBay Sale Scatter Plot",
             includeHTML("www/googleAnalytics.html"),
             h2(textOutput("eBayFigureAverage")),
             plotlyOutput("plotEBayValues") %>% withSpinner(color="#0dc5c1")
             ),
    tabPanel("eBay Sales Table Data", 
             includeHTML("www/googleAnalytics.html"),
              DT::dataTableOutput("tableEBaySaleValues") %>% withSpinner(color="#0dc5c1")
             ),
    tabPanel("Amazon Price Plots",
             includeHTML("www/googleAnalytics.html"),
             h2(textOutput("amazonFigureAverage")),
             plotlyOutput("plotAmazonValues") %>% withSpinner(color="#0dc5c1")
             )
  )
)
)

我尝试更改网页中的 div 间距，但我最终得到了裁剪后的 app.R 视图，在闪亮的应用程序下方带有灰色空间，所以我不相信网页中的问题。

为了完整起见，这里是网页的一部分

---
title: "My Toy Box - Online - A Star Wars Toy Pricing Guide and Archive"
author: "Jason W. Gloor"
date: '`r format(Sys.time(), "%Y-%B-%d %H:%M:%S")`'
output: 
  html_document:
    toc: true # table of content true
    toc_depth: 3  # upto three depths of headings (specified by #, ## and ###)
    number_sections: false  ## if you want number sections at each table header
    theme: yeti  # many options for theme, this one is my favorite.
    highlight: tango  # specifies the syntax highlighting style
    css: myToyBox.css   # your custom css
  html_notebook: 
    toc: yes
---
```r setup, include=FALSE
knitr::opts_chunk$set(echo = TRUE)
library(dplyr)
```

# My Toy Box - Online - Star Wars Pricing Made Easy #topTag 

"My Toy Box On-line" is an interactive site allowing access to view Star Wars figures from the Kenner vintate lines through Hasbro's modern series.  This utility shows figures average estimated value from eBay and current Amazon prices, where available.  Figure values should be used as an estimate.  Amazon prices are updated approimately every 30 minutes.  eBay values are updated approximately each week.

If you are looking for the ios app, MyToyBox is also available in the [appStore](https://itunes.apple.com/us/app/my-toy-box/id1217665205?mt=8). [See below](#myToyBoxiOS) or click the [MyToyBox iOS](#myToyBoxiOS) Table of Contents Item for more details.

Hi Impact

<iframe src="./starWarsFigureApp" style="border: 1px solid #AAA; width: 100%; height: 940px"></iframe>

# My Toy Box iOS #myToyBoxiOS

【参考方案1】：

更新

在回答问题时，我无法看到您发布的屏幕截图，显然我误解了您的问题。当我打开您的网站（在带有 Firefox 或 Safari 的 Mac 上）时，您的应用程序的高度似乎不是问题。我宁愿在您的应用内的数据表右侧有一个空白区域。

您网站的外观似乎因浏览器而异。

关于空白： 在 Firefox 中检查页面显示有几个“td dt-right”导致出现空格。我怀疑该错误源于您的数据表定义。此外，在数据表中向下滚动时，标题行似乎已关闭。可能是选项中的一些错误说明？

一般来说，如果没有可重现的示例和访问所有代码（尤其是应用程序的服务器端），就很难调试页面/应用程序。

【讨论】：

感谢您的回复。不知何故，该应用程序在没有任何代码更改的情况下重新开始工作。因此，我无法确定此解决方案是否能解决问题。

【参考方案2】：

在包含表格的右列上有一个错误的引导列类。

变化：

col-sm-8 到 col-sm-9

我对这个平台了解不多，请问可以给MainPanel加宽度参数吗？

所以就像侧面板有这样的：

sidebarPanel(collapsed = FALSE, width = 3,

你能做到吗：

mainPanel(width = 9, ..... more stuff below

【讨论】：

感谢您的回复。不知何故，该应用程序在没有任何代码更改的情况下重新开始工作。因此，我无法确定此解决方案是否能解决问题。

当我查看它时，它看起来对我不起作用......但没关系