showing element out of scroll area


Tags: javascript,jquery,html,css

Problem :

I have a chosen drop down in a box. Box has fixed height and width. Whenever I select a value from dropdown the box shows scroll bars. I want to show the options of dropdown box above the box. How can I do it?

check my code at http://jsfiddle.net/tqHNs/

html

<div id="wrapper">
    <select id="sel" style="width: 100px;">
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
        <option value="1">Val-1</option>
    </select>
</div>

css

#wrapper {
    width: 300px;
    height: 100px;
    overflow: scroll;
    border: 1px solid #000;
}


Solution :

Add this rule to you CSS or change the CSS rules in the chosen.CSS file

.chosen-container{
    position:absolute !important;
}

DEMO


    CSS Howto..

    How to apply css for min-width and print?

    How to apply CSS to HTML body element?

    How can I create a nav bar with a repeat image inside?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How to do centered

    with
    on both sides over a background image

    how to make a h2 background image 'dynamic' in height as well

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to remove/close bootstrap css notification? [closed]

    How to make tabs with html and css

    How to Stop Down Arrow on Scroll Bar from going off screen on page resize with CSS

    How to apply custom CSS to Angular Material md-contact-chips

    How to specify max-height css property to Screen size

    When using WebFont loader, how to hardcode the css?

    CSS: How to force DIV to maintain aspect ratio the same way IMG does

    jQuery Tooltip - How To Declare 2 Options

    How do I use existing CSS to style HTML content in textAngular

    Gradient css borders not showing in internet explorer an firefox

    How to make JS and CSS cacheable until changes? [closed]

    How to find an element using Watir by inline css styles

    How to split page and reveal stuff underneath?

    How to make a toggleable navbar in pure CSS?

    CSS - How to remove whitespace between anchored images

    Visual studio 2013 crash when editing a css file. How do I troubleshoot?

    How do I post a jsfiddle example of some trouble I'm seeing in Rails?

    CSS: How to position child divs in main div side by side

    how would you set up the GUI for a web-based board game structure?

    How to make this text bigger?

    how to format a single html a href text to have multiple css properties (two different font families)

    How to make css-menu independent of the number of menu items?

    How to make a web form with 3 columns?