[英]R Shiny dynamic box height
这个问题适用于 R shiny 中的所有框类型(框、值框、选项卡框等),但我将使用简单框给出一个示例。
在我的代码中,我有很多情况在同一行中有两个或多个框。 当这些框包含类似数量的信息时,高度对齐没有问题,并且使用较小的浏览器窗口动态调整此高度效果很好。
当框不包含相同数量的信息时,问题就来了(例如,两个相邻的表,行数不同); 这会导致高度不整齐排列。
我知道我可以手动设置框的高度,但是当我不知道每个框中需要显示的信息量时,问题就来了。 我不想让盒子太短(可能会剪掉信息),也不想让盒子太高(并占用太多屏幕空间)。 但是我确实希望盒子的高度相同。
因此,是否可以提取每个盒子动态生成的最大高度并使用该高度将两个盒子强制到该高度?
当框包含不同数量的信息时,这对我来说很重要,当调整屏幕大小时 [例如] 一个框的文本跳到两行但另一个框没有(导致高度不匹配)。
类似问题:
R shiny Datatable:控制行高以对齐不同表的行
我在下面为 Shiny Example Number 2 提供了修改后的代码:
library(shiny)
# runExample("02_text")
ui <- fluidPage(
# App title ----
titlePanel("Shiny Text"),
# Sidebar layout with a input and output definitions ----
sidebarLayout(
# Sidebar panel for inputs ----
sidebarPanel(
# Input: Selector for choosing dataset ----
selectInput(inputId = "dataset",
label = "Choose a dataset:",
choices = c("rock", "pressure", "cars")),
# Input: Numeric entry for number of obs to view ----
numericInput(inputId = "obs",
label = "Number of observations to view:",
value = 10)
),
# Main panel for displaying outputs ----
mainPanel(
box(
# Output: Verbatim text for data summary ----
verbatimTextOutput("summary"),
title = "Verbatim",
width = 6
),
# Output: HTML table with requested number of observations ----
box(
tableOutput("view"),
title = "Table",
width = 6
)
)
)
)
server <- function(input, output) {
# Return the requested dataset ----
datasetInput <- reactive({
switch(input$dataset,
"rock" = rock,
"pressure" = pressure,
"cars" = cars)
})
# Generate a summary of the dataset ----
output$summary <- renderPrint({
dataset <- datasetInput()
summary(dataset)
})
# Show the first "n" observations ----
output$view <- renderTable({
head(datasetInput(), n = input$obs)
})
}
shinyApp(ui, server)
// 使用这个函数让你的盒子高度相等
equalheight = function(container) {
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto');
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('use your box same height class here ');
});
$(window).resize(function() {
equalheight('use your box same height class here');
});
虽然我不知道如何回答“是否有可能提取每个盒子动态生成的最大高度并使用该高度将两个盒子强制到那个高度?” 确切地说,我发现以下基于 CSS 的解决方法可以解决您的问题,并使所有框排成一排,高度相同——只需在每个boxPlus()
中连续添加style = "height: XX; overflow-y: auto"
:
height: XX
,其中XX
可以是任何 CSS 单位(我个人更喜欢视点比率,例如height: 33vh
将使盒子高达屏幕的三分之一,无论屏幕分辨率如何),设置盒子的高度;overflow-y: auto
在需要时添加垂直滚动条。使用这种方法,当用户调整屏幕大小时,所有框都保持相同的高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.