[英]shinyWidgets pickerInput width issue overflow off sidebar
I am using shinyWidgets pickerInput
within a flexdashboard sidebar.我在 flexdashboard 侧边栏中使用 shinyWidgets
pickerInput
。 My issue is that when the options in the pickerInput
are too wide they get cut off within the width of the sidebar which makes it so you cannot read the options, see which are selected, or see the deselect all
button.我的问题是,当
pickerInput
中的选项太宽时,它们会在侧边栏的宽度内被截断,这使得您无法阅读选项、查看哪些被选中或看到deselect all
按钮。 Is there a way to have the pickerInput
dropdown overflow off of the sidebar and onto the body of the page?有没有办法让
pickerInput
下拉菜单溢出侧边栏并溢出到页面主体?
As an intermediate solution I have found that you can use:作为中间解决方案,我发现您可以使用:
choicesOpt = list(
content = stringr::str_trunc(sort(unique(COLUMN_NAME)), width = 25))
To truncate the text in the pickerInput
so that you are able to see which options are selected and all of the buttons but you are still not able to read each option fully.截断
pickerInput
中的文本,以便您能够看到选择了哪些选项和所有按钮,但您仍然无法完全阅读每个选项。
Edit:编辑:
Adding reprex - Looking to have the filter drop down open over the body so that everything is visible.添加 reprex - 希望过滤器在身体上方打开,以便一切都可见。
---
title: "TEST"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: rows
---
```{r setup, include=FALSE}
library(dplyr)
library(shiny)
library(DT)
library(shinyWidgets)
Name <- c("LONNGGGGGGGGGGGGGGG TEXXTTTTTTTTTTTTTTTTTT", "Bill", "Maria", "Ben", "Tina")
Age <- c(23, 41, 32, 58, 26)
df <- data.frame(Name, Age)
```
Sidebar {.sidebar}
=======================================================================
### Filters
```{r}
pickerInput(
inputId = "name",
label = "test",
choices = sort(unique(df$Name)),
selected = sort(unique(df$Name)),
multiple = TRUE,
options = list(
`actions-box` = TRUE,
`selected-text-format` = paste0("count > ", length(sort(unique(df$Name))) -1),`count-selected-text` = "All Selected")
)
```
TEST
=======================================================================
Row
-------------------------------------
```{r}
filtered_data <-
reactive ({
req(input$name)
df %>%
filter(Name %in% input$name)
})
renderDataTable(filtered_data(), class = 'cell-border stripe',
extensions = 'Buttons',
rownames = FALSE,
options = list(
columnDefs = list(list(className = 'dt-center',width = '100px', targets = "_all"))),fillContainer=TRUE)
```
This may have unintended side effects but here's a workaround to force the picker dropdown to not get cutoff.这可能会产生意想不到的副作用,但这里有一个解决方法可以强制选择器下拉列表不被切断。
You can add your own css class to the Sidebar section inside the {}
.您可以将自己的 css class 添加到
{}
内的边栏部分。 I used .my-class
as a placeholder.我使用
.my-class
作为占位符。 Then I inserted a css chunk and added .my-class
to the .section.sidebar
classes from flexdashboard.然后我插入一个 css 块并将
.my-class
添加到 flexdashboard 的.section.sidebar
类中。 If you don't do that then that css will overwrite the class. Most likely because it's loaded afterwards.如果您不这样做,那么 css 将覆盖 class。很可能是因为它是在之后加载的。
Also in the reprex provided, for whatever reason the choices were the not the actual values but instead the level positions.同样在提供的代表中,无论出于何种原因,选择不是实际值,而是水平位置。
So I used sort(unique(Name))
instead of sort(unique(df$Name))
所以我使用
sort(unique(Name))
而不是sort(unique(df$Name))
```{css, echo=FALSE}
.section.sidebar.my-class {
overflow: visible;
z-index: 10;
}
```
Sidebar {.sidebar .my-class}
=======================================================================
...
Option 2: Truncate choices选项 2:截断选择
The above option works as long as the height of the sidebar does not exceed the height of the browser window. Ideally you want overflow-x: visible
and overflow-y: scroll
.只要侧边栏的高度不超过浏览器的高度 window,上述选项就有效。理想情况下,您需要
overflow-x: visible
和overflow-y: scroll
。 However I'm not sure if that's possible on the same div with position fixed.但是我不确定在修复了 position 的同一个 div 上是否可行。
Instead you could truncate your options so they fit in the window. If you want more text to be displayed you can increase the width of the sidebar.相反,您可以截断您的选项,使它们适合 window。如果您想要显示更多文本,您可以增加侧边栏的宽度。
cs = sort(unique(Name)
pickerInput(
inputId = "name",
label = "test",
choices = cs,
selected = cs,
multiple = TRUE,
options = list(
`actions-box` = TRUE,
`selected-text-format` = paste0("count > ", length(sort(unique(df$Name))) -1),`count-selected-text` = "All Selected"
),
choicesOpt = list(
content = stringr::str_trunc(cs, width = 18)
)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.