Fancyselect: How to force to open the selector at the bottom?


Tags: javascript,jquery,html,css,jquery-plugins

Problem :

This is the plugin:

Fancyselect page - http://code.octopuscreative.com/fancyselect/

This is the situation:

I need to control the position where the selector window with the various options is going to open.

I have tried to look into the code, but i did not figured out how to do it. But i think that, by default, it depends if there is or not some space above.

To be more clear I have recreated two examples:

Here the selector is opening at the top: http://jsbin.com/AqoYucAG/2/edit

Here the selector is opening at the bottom: http://jsbin.com/AqoYucAG/3/edit

But, trust me, the css and the js are exactly the same in the both. What change is that in the second example it misses the div with its content.

My actual situation is similar to the first example: the fancyselect is under a div with some text, and as in the jsbin, the selector is opening at the top, while i need to open it at the bottom.

This is the question:

How is possible to control the position where the selector is going to open? And how to make it opening at the bottom?

Thank you!



Solution :

if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height()) {
            options.addClass('overflowing');
          } else {
            options.removeClass('overflowing');
          }
        }

he add and remove overflowing class that css class control the way control is opened

if add > options.addClass('overflowing'); the select will open at the bottom

to test that try to comment //options.addClass('overflowing'); and see the behavior


    CSS Howto..

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to increase div width according to the text inside it?

    JqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed

    How to position the element using absolute position?

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    How can I create left & right side fixed width elements with a center that fills the remainder?

    how to create Hollow triangle in css [duplicate]

    How to get css properties set explicitly via the style attribute? [closed]

    How do I add a button click event to my own button in Visual Studio C#

    How to use array so i will get value either x[0] or x[1]

    How can i make image size big using css?

    how is the search mail button implemented?

    How to only make the opacity lower for the background and not the text in it?

    How to make menu fold like paper using CSS?

    How do i add a cookie to my popup form? Built only with css and html [closed]

    How to divide 3 divs(CSS + MVC)

    How do I apply desktop media queries style to IE?

    css: how to force images to scale at same amount?

    how can i center the text inside my css div circle

    How to apply CSS on Unordered List written by JSP tag on web Page

    How can I make list item spacing more acceptable in html/css email for all viewers?

    How to add Video from project directory in the background of Div

    how to avoid css jitters while applying css border with hover pseudo class

    Bootstrap table table-condensed table-hover, Top Border not showing

    How to add custom layout and css in a CakePHP application?

    How to support transitionend without browser sniffing?

    How to fit inner div inside an outer div

    CSS: How can I have a
    within a expand the table horizontally?
    To answer your first question and to supplement LJ's answer: Here is the relevant part of the spec to explain why the table expands to contain the inner div and...
    Read more

    How to blur a banner photo in CSS Style?

    How to set the css property of dynamic data