Блестящий выбор-выпадающее меню, открытое в направлении вверх - PullRequest
Новая
       17

Блестящий выбор-выпадающее меню, открытое в направлении вверх

0 голосов
/ 11 сентября 2018

В моей блестящей панели инструментов у меня есть несколько выпадающих меню типа selectizeInput .Они расположены внизу страницы, поэтому вместо того, чтобы открывать выпадающие меню вниз, я бы хотел открыть их вверх.

Я нашел решение для выпадающего меню shinyWidgets, которое называется pickerInput .Решением здесь было добавить тег css: 

.dropdown-menu{bottom: 100%; top: auto;}

Однако этот тег не работает для selectizeInput.Любая идея, которую css я должен добавить в свой сценарий?

Редактировать (ответ по примеру Мартенсама) 

library(shiny)

ui <- fluidPage(
  # selectize style
  tags$head(tags$style(type = "text/css", paste0(".selectize-dropdown {
                                                     bottom: 100% !important;
                                                     top:auto!important;
                                                 }}"))),
  div(style='height:200px'),
  selectizeInput('id', 'test', 1:10, selected = NULL, multiple = FALSE,
                 options = NULL)
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Ответы [ 2 ]

0 голосов
/ 09 мая 2019

Спасибо за это, очень полезно!

Оставьте это здесь на всякий случай, если кто-то заинтересован в изменении поведения только для некоторых selectizeInput и оставит остальные по умолчанию (так же, как я): 

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('#upwardId+ div>.selectize-dropdown{bottom: 100% !important; top:auto!important;}'))),
  selectizeInput(inputId = 'downwardId', label='open downward', choices = 1:10, selected = NULL, multiple = FALSE),
  div(HTML("<br><br><br><br><br>")),
  selectizeInput(inputId = 'upwardId', label='open upward', choices = 1:10, selected = NULL, multiple = FALSE)
)

server <- function(input, output, session){}

shinyApp(ui, server)
0 голосов
/ 25 февраля 2019

Вы можете сделать что-то вроде 

.selectize-dropdown {
  top: -200px !important;
}
...