Grow your CSS skills. Land your dream job.

Select Cuts Off Options In IE (Jerking solution)

  • # January 27, 2010 at 5:00 pm

    Hello every one. I adquired a code that Chris did on a website I am working to fix the <select> section on a form that has a fixed width. The code is this:

    Code:
    $(document).ready(function(){
    $(“select”)
    .click(function(){
    $(this)
    .data(“origWidth”, $(this).css(“width”))
    .css(“width”, “auto”);
    })
    .change(function(){
    $(this).css(“width”, $(this).data(“origWidth”));
    });
    });

    The website’s address is: http://decormouldings.org/shop/aur601p8/

    The problem is that some choises are too long, but the width of the box is fixed, so it was getting chopped off. So Now I got this script that does the work, and allows to show the rest of the <select>. The problem is that is Jerking. Every time I click it, it jerks back. Also, how do I get it back to its original width?

    Karl,
    http://www.mevaser.com/

    # January 28, 2010 at 10:23 am

    Never mind. I fix the Jerking, I did this:

    Code:
    $(document).ready(function(){
    $(“select”)

    .hover(function(){
    $(this)
    .data(“origWidth”, $(this).css(“width”))
    .css(“width”, “auto”);
    })

    .change(function(){
    $(this).css(“width”, $(this).data(“origWidth”));

    });

    });

    What I love to see is that the dropdown menu would come back to its width. Right now stays the width that the bar has set because of the length of text. Any one?

    Thanks,

    Karl,
    http://www.mevaser.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".