Как заставить параметры virtualSelectInput() выходить за пределы боковой панели bslib?
Открыв раскрывающийся список, я хотел бы, чтобы полное имя элемента было видно, т. е. выходило за пределы тела панели мониторинга. По умолчанию имена обрезаются по границе боковой панели.
Мне бы хотелось развить свои навыки работы с интерфейсом до такой степени, чтобы я мог решить эту проблему самостоятельно. Но в настоящее время я не могу решить эту проблему, несмотря на то, что видел подобные примеры, такие как этот.
Было бы очень признательно за решение с объяснением того, как решать такие проблемы.
library(shiny)
library(bslib)
library(shinyWidgets)
vec_long_items <- sapply(1:10, function(i) {
paste(sample(letters, 100, replace = TRUE), collapse = "")
})
shinyApp(
ui = page_sidebar(
title = "Long items to select",
sidebar = sidebar(
virtualSelectInput(
inputId = "in1",
label = "Input 1",
choices = vec_long_items,
),
),
),
server = function(input, output, session) {
output$out_text <- renderTable(data.frame(items = vec_long_items))
}
)
@Chris Пожалуйста, смотрите изменения выше.
Хорошо, это не моя идея «переполнения», вероятно, есть некоторые «относительные» настройки размера боковой панели, хотя это противоречит концепции, согласно которой боковые панели меньше тела.
Итак, ваша цель — заставить это работать с помощью virtualSelectInput? Потому что с pickerInput все работает, как в вашем связанном вопросе, без проблем. Также я не понимаю, почему вы поставили label = "shinyWidgets::pickerInput" выше. Вам следует сформулировать свой вопрос более конкретно, опустить R shiny input и указать, какой ввод.
@Jan Нет, любой вклад. С pickerInput тоже не работает. Причина в том, что я использую bslib. Метка исправлена.
Хорошо, я вижу. Используя ответ по ссылке, вам нужно перейти .sidebar в css, тогда это сработает для pickerInput, как описано для боковой панели bslib.
@Jan Ян, я пробовал это, но безрезультатно. Что ты имеешь в виду?
1) css <- ".sidebar {overflow: visible !important;}", 2) tags$head(tags$style(HTML(css))) в page_sidebar() и 3) options = pickerOptions(dropdownAlignRight = TRUE) в pickerInput().
@Jan Ах, у меня были теги $head внутри аргумента заголовка. Моя вина. Это действительно работает, но знаете ли вы, почему это не сработает для virtualSelectInput?
@ Крис, я не понимаю, что ты имеешь в виду. Но я относительно новичок в CSS.
Ответы 1
Элементы виртуального выбора отображаются в виде dropbox-container, и в зависимости от вашего текущего представления они могут находиться над или под раскрывающимся списком. Вы можете переопределить свойства csswidth и max-width этих двух селекторов:
.vscomp-dropbox-container.pop-comp-wrapper.position-top,
.vscomp-dropbox-container.pop-comp-wrapper.position-bottom
{
width: fit-content !important; /* make boxes fit their content */
max-width: unset !important; /* overwrite default max-width for larger boxes */
}
И тогда нам нужна еще одна корректировка: A virtual-select имеет свойство dropBoxWrapper, которое определяет родительский элемент для отображения Dropbox. По умолчанию для него установлено значение self, и мы устанавливаем для него значение body, т. е. устанавливаем
dropboxWrapper = "body"
в virtualSelectInput. Благодаря этому dropbox не ограничивается боковой панелью.
library(shiny)
library(bslib)
library(shinyWidgets)
vec_long_items <- sapply(1:10, function(i) {
paste(sample(letters, 100, replace = TRUE), collapse = "")
})
css <- "
.vscomp-dropbox-container.pop-comp-wrapper.position-top,
.vscomp-dropbox-container.pop-comp-wrapper.position-bottom
{
width: fit-content !important;
max-width: unset !important;
}"
shinyApp(
ui = page_sidebar(
title = "Long items to select",
tags$head(
tags$style(HTML(css))
),
sidebar = sidebar(
virtualSelectInput(
inputId = "in1",
label = "Input 1",
choices = vec_long_items,
dropboxWrapper = "body"
),
)
),
server = function(input, output, session) {
output$out_text <- renderTable(data.frame(items = vec_long_items))
}
)
Как вы вообще начали это решать? Я думаю, вы нашли .vscomp-dropbox-container.pop-comp-wrapper через Inspect?
Да, вы правы, мне пришлось проверить это, чтобы получить селектор.
Знаете, почему селектор такой длинный? Наконец, я не понимаю свойство dropBoxWrapper, на которое вы ссылаетесь. Что означают self и body в этом контексте?
Что касается селекторов, пожалуйста, проверьте DOM. Если вы, например. есть .vscomp-dropbox-container, как отличить тот, что над раскрывающимся списком, от того, что под раскрывающимся списком? Вам нужен дополнительный класс. Что касается dropBoxWrapper, подумайте о родителе Dropbox. self относится к самому вводу, тогда как body относится к телу документа.
Не уверен, что вы пытаетесь здесь сделать. Можете ли вы дать больше контекста?