Selectize-dropdown menu shines brightly as it opens upwards

In my sleek dashboard design, I have implemented a few dropdown menus using selectizeInput. These menus are currently positioned at the bottom of the page, but I want them to open in an upward direction instead of downward.

While I found a workaround for the shinyWidgets dropdown menu known as pickerInput by following a solution that involved adding a css tag:

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

Unfortunately, this approach did not work for the selectizeInput dropdown. Can anyone suggest the appropriate css modifications that should be made in my script?

Edit (answered by maartenzam with an example)

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)
htmlcssrtwitter-bootstrap-3shiny

Answer №1

If you want to achieve this effect, you could try the following:

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

Answer №2

Appreciate the helpful information!

Just leaving a note here in case someone wants to customize the behavior for specific selectizeInput elements while keeping others as default:

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)

Answer №3

Similar to @ismirsehregal's approach, here is a unique spin on it by incorporating the new virtualSelectInput function from the shinyWidgets package:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # customizing virtual select css https://github.com/sa-si-dev/virtual-select/blob/master/dist/virtual-select.min.css
  tags$head(tags$style(type = "text/css", paste0(".vscomp-dropbox {
                                                        position: absolute !important;
                                                        bottom: 100% !important;
                                                        top: auto !important;
                                                     }}"))),
  div(style='height:200px'),
  virtualSelectInput('id', 'test', 1:10, selected = NULL, multiple = TRUE,
                     options = NULL)
)

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

shinyApp(ui, server)

Answer №4

To handle this behavior, you can utilize the onDropdownOpen event.

$('select[multiple]').selectize({
  onDropdownOpen: function($dropdown) {
    $dropdown.css({
      bottom: '100%',
      top: ''
    }).width(this.$control.outerWidth());
  }
});

In my current project, I implemented the use of the data-dropdown-direction attribute to determine the dropdown direction.

In the HTML template:

<select multiple data-dropdown-direction="up"></select>

In the JavaScript:

$('select[multiple]').selectize({
  onDropdownOpen: function($dropdown) {
    if (this.$input.data('dropdownDirection') === 'up') {
      $dropdown.css({
        bottom: '100%',
        top: ''
      }).width(this.$control.outerWidth());
    }
  }
});

Answer №5

One way to achieve this functionality is by utilizing Selectize options.

$('#selectize').selectize({
    dropdownDirection: 'up',
    plugins: [
        'dropdown_direction'
    ],                
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Plot printing is disrupted by landscape formatting in R Markdown's R code chunk

In my R Markdown file, there is a code block that generates multiple ggplots in a for loop. This block is called as follows: {r print_data, results='asis'} print.all.results() Within the print.all.results() function, the ggplots are created and ...

rlatexr-markdownknitrpander

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

I'm currently utilizing CodeIgniter 3 and dompdf to convert an HTML view into a PDF. While I am able to successfully convert the HTML to PDF, the proper styling is not being applied. All necessary CSS files have been included as custom design in the v ...

cssimagecodeignitercodeigniter-3dompdf

Loading a PHP template into HTML using a JQuery loop

I am struggling with an API call that returns an array of arrays. My goal is to loop through each value and use them to load a PHP template that I have created. The issue I am facing is that only the first value is being displayed properly, while the subse ...

phphtmljqueryajax

The variable in the HTML input value is not fully visible when filling out the HTML form

I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...

pythonhtmlinputflask

Creating a dynamic dropdown menu: a step-by-step guide

<ul class="nav navbar-nav friend-label"> <li class="dropdown" ng-repeat="module in modules"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> {{module.ModuleName}} < ...

angularjscssdrop-down-menutwitter-bootstrap-3

Are HTML tables a viable fix for the problem with ng-repeat?

Let's talk about a fictional dataset that mirrors tabular data found in Excel. function SU(name: String, data: Array<any>) { this.name = name, this.data = data }; function Month(month: String, year: String, goal: Number, projection: ...

htmlangularjshtml-tableangularjs-ng-repeat

What is the best way to finish up the JavaScript code below?

Having just started learning JavaScript, I am struggling to figure out how to use JavaScript to clear the text in a text box and move it below the box when a user starts typing. I've been watching this tutorial http://codepen.io/ehermanson/pen/KwKWEv ...

javascripthtmlcssfunctiontarget

Adding one class at a time, with each new class being added every second

My goal is to add classes one by one [test0 test1 test2] up to 10, with each class being added after one second. $('.rating-block').AddClass('test0 test1 test2 ... test10' ); I am experimenting with the following code, but I don' ...

jqueryhtmlarrays

What could be the reason my HTML5 application is not working offline on my android device?

Hello, I am encountering a problem and I could really use your assistance in figuring out what I am missing. There is a webpage that showcases numerous HTML5 mobile/web applications which can be found at For instance, let's look at this app where yo ...

androidhtmlweb-applications

Having trouble with rendering components in React and Bootstrap?

Attempting to display basic Bootstrap components using React. This corresponds to the index.html file: <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="j ...

javascripthtmltwitter-bootstrapreactjs

Steps to import an excel file by clicking a button in an Angular application

Our project requires displaying an Excel file when a menu button is clicked. https://i.sstatic.net/9tas1.png When a new tab is opened, I would like to showcase the Excel file that is saved on my personal computer. The format of the Excel file should resem ...

htmlangularjsexcel

The Vuetify v-img component fails to display images when using absolute paths

Having a bit of trouble here: I want to showcase an image using an absolute path in Vuetify with the v-img tag, but for some reason, it's not displaying. I attempted to use :src="require('path/to/img')", but it throws an error saying "This ...

htmlvue.jsvuetify.js

Tips for resolving: 404 error when attempting to load a popup using Ajax

I am new to RoR, so I might be missing something. I am struggling with loading a popup through Ajax when a button is clicked. Every time I attempt it, I encounter an error related to the Ajax method as shown below. I believe my syntax is correct. I have ...

htmlruby-on-railsrubyselecthaml

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

Ways to resize column widths in tree views on Odoo version 10?

I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions: Trying to change the width attribute in the field tag: width="100px" or width="15%%" Using the style att ...

csstreeviewodooodoo-10odoo-view

What is the best way to pass a variable value from a JavaScript function to a Python function within a Django framework

My goal is to use HTML and JavaScript to scan a QR code in nurse_home.html. I have successfully scanned and viewed the content of the QR code on the website, but I am facing an issue with POSTing the QR code output represented by <output type='POST ...

javascriptpythonhtmldjangoqr-code

Moving a DOM element within AngularJS to a new location

I have created an angular directive that functions like a carousel. To keep the dom element count low, I delete elements from the dom and then re-insert them using angular.element to select, remove, and insert items as shown below: app.directive('myD ...

javascripthtmlangularjs

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

Aggregated transformation of JSON

Is there a more elegant way to perform a groupwise conversion to JSON, with the grouping variable in the first column of the final tibble? The current code achieves the desired result but is considered messy, especially due to the need for the final pivot_ ...

rjsondplyrpurrr

Questions about syntax: What is the correct course of action?

If there is a child inside a div with an id, such as id="mother", how should the css be written correctly? Example: 1) #mother ul li {...} or 2) .mother ul li {...} Is there a difference? The second example I came across when MOTHER had a class name, ...

htmlcsssyntax