CODEWITHSUNDEEP
javascripttom-select
Cornelius
Cornelius

Reputation: 155

direction of the dropdown in tom-select

Iam currently using the tom-select.js as replacenment for html select.

is it possible to get tom-select to open the dropdown upwards (above the select element) if there is not enough space to display the dropdown below the select element?

This is for example working with select2.js out of the box (but I wanted to avoid its jquery dependency ).

Thansk for help, Cornelius

Upvotes: 3

Views: 688

Answers (2)

rajniszp
rajniszp

Reputation: 182

For future lurkers: I'll leave a "solution" provided by library's maintainer.

new TomSelect("#select-tags",{
  onInitialize:function(){
    this.popper = Popper.createPopper(this.control,this.dropdown); 
  },
  onDropdownOpen:function(){
    this.popper.update();
  }
});
html{
  height:200vh;
}
.container{
  margin-top:80vh;
}
<script src="https://cdn.jsdelivr.net/gh/orchidjs/[email protected]/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/orchidjs/[email protected]/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<div class="p-4 container"> <select id="select-tags" multiple placeholder="Best movies and TV shows">
        <optgroup label="TV Shows">
            <option value="Blue Bloods" data-date="2010-2021">Blue Bloods (2010-2021)</option>
            <option value="Magnum P.I." data-date="1980-1988" selected>Magnum P.I. (1980-1988)</option>
        </optgroup>
        <optgroup label="Movies">
            <option value="An Innocent Man" data-date="1989">An Innocent Man (1989)</option>
            <option value="In & Out" data-date="1997">In & Out (1997)</option>
            <option value="Lassiter" data-date="1984">Lassiter (1984)</option>
            <option value="Mr. Baseball" data-date="1992">Mr. Baseball (1992)</option>
            <option value="Quigley Down Under" data-date="1990">Quigley Down Under (1990)</option>
            <option value="Three Men and a Baby" data-date="1987">Three Men and a Baby (1987)</option>
        </optgroup>
    </select>
    </div>
(source: JSFiddle)

Other links:

Upvotes: 0

Cornelius
Cornelius

Reputation: 155

Ok, found a workaround, maybe somebody is interested.

i use the onDropdownShow event to calculate which direction is best and set an appropriate css class.

new TomSelect("#myselect",{
onDropdownOpen:function(dropdown){
    let bounding = dropdown.getBoundingClientRect();
    if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
        dropdown.classList.add('dropup');
    }
},
onDropdownClose:function(dropdown){
    dropdown.classList.remove('dropup');
},
});

and the css:

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

Best, C

Upvotes: 3

Related Questions