Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    How to shrink a <select> element

    Hi,

    I want to shrink a <select> element from it's height to 0, using CSS animations to give a collapsing effect. I have it mostly working, but there is maybe ~15 px of height that don't seem to respond to the height: 0; style.

    Here's an example:
    http://jsfiddle.net/DAKwv/1/

    PHP Code:
    select {
        -
    moz-transitionheight 1s ease;
        -
    webkit-transitionheight 1s ease;
        
    padding0;
        
    height50px;
        
    margin0;
        
    border0;
    }

    select.off {
        
    height0;

    The same behavior is exhibited in Firefox 15 and Chrome 21.

    Any ideas how to fully collapse it?
    Running Windows 7 x64

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Try changing the <select> to display: block.

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Thanks Sammy. So it works in Firefox in Windows and OSX and Chrome on Windows... any idea why Chrome on OSX isn't behaving the same?


    This is has the added display: block style:
    http://jsfiddle.net/DAKwv/2/
    Running Windows 7 x64

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I do not know the answer to that, prior to your asking, I never heard of OSX. There shouldn't be any rendering differences between OS's, it's the browsers software that will determine how it is rendered.

    Quote Originally Posted by qwertyuiop View Post
    Thanks Sammy. So it works in Firefox in Windows and OSX and Chrome on Windows... any idea why Chrome on OSX isn't behaving the same?
    Chrome on an Apple OS? Doesn't sound very probable as Safari is dominant on Apple OS's. What version of Chrome do you have installed on OSX? Should be under Settings -> Help.

    Try reloading the page in OSX, display: block should work in all browsers, could you describe the problem occurring in OSX? If it's the same as your previous post, I can almost guarantee the page was cached and you need to clear the cache.

    Additionally, try viewing the results in a new file instead of jsfiddle.
    Last edited by Sammy12; 09-21-2012 at 11:01 AM.

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Right, I didn't think there should be a significant difference in rendering in the same browser between two OS's. I have Chrome 21 on both Windows 7 and OS X (Lion).

    The issue is that, when collapsing, the <select> has a minimum height of about 15 pixels. Firefox is able to collapse it completely to 0 pixels.

    And actually Safari 6.0 on OS X behaves just like Chrome, meaning it's probably a webkit issue.

    Here's what it looks like in Firefox (on OS X, but Windows has the same output)


    And on Chrome (on OS X, same output as Safari)
    Running Windows 7 x64

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Setting the <select> to display: block; worked for me in Chrome, Firefox, IE7 (pretty much), and Opera. Safari however did not work.

    Try adding:

    Code:
    select {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
                box-sizing: border-box;
    }
    If that doesn't work, then it's a browser problem. The <select> tag is closer to the browser than it is to the developer, meaning you can't really customize it that much. If none of my suggestions worked, you may want to consider setting the <select> to display: none; or -webkit-appearance: none; (which will dismantle the <select>) after all the animations with JavaScript.

    Currently the arrow in the <select> is what is preventing the box from moving upward, -webkit-appearance: none; will remove the arrow.
    Last edited by Sammy12; 09-21-2012 at 11:06 PM.

  • Users who have thanked Sammy12 for this post:

    qwertyuiop (09-21-2012)

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Thanks for the suggestions.

    The reason I opted not to use display: none; was because I couldn't animate the transition; it would be an instant off/on effect, which wasn't what I wanted.

    The best solution so far is adding -webkit-appearance: none; to the off state. I'll live with it for now
    Running Windows 7 x64


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •