The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

css animation causes submit button to be missed

  • # February 26, 2013 at 2:35 am

    I have a form on a site with multiple text areas (maybe a dozen) for responses to different categories. To save vertical space, I use CSS to collapse the text areas to one row, and then when that text area receives focus it expands to 240px.

    At the bottom of the page, when the user clicks the submit button, if one of the areas are ‘open’ then the loss of focus collapses the text area (as it should) and the submit button is not actioned.

    I have a cut down example

    You can press the submit button at the top of the page and it works every time. The button at the bottom of the page only works when the text area is collapsed, presumably because the text area is collapsed first, and then the click acts on the page and not the button that was in that position previously?

    I have to admit being lazy, I have only tested this issue on Chrome for OSX.

    I’m sure I could code a similar (and working) effect with jquery, but I wondered of there is a CSS only solution?

    Any suggestions please?

    # February 26, 2013 at 3:53 am

    the css transition being applied on blur doesnt let you interact with the bottom can style it so the submit button is either inline with the textarea or inside them.hope it helps

    # February 26, 2013 at 6:00 am

    This reply has been reported for inappropriate content.

    It’s definitely because of the transition, which starts to run on mousedown (on the submit button) and the button click fires on mouseup. So if between mousedown and mouseup the submit button moves from under the mouse it fails.

    I’d probably use JavaScript to expand/collapse the text areas, and only collapse one when another one is expanded.

    # April 14, 2013 at 4:40 am

    The problem described in Chris’s latest video is related: – ie, the ‘click’ only takes place on mouseup and if the target is no longer under the pointer then the click does not have the desired outcome.

    # April 14, 2013 at 7:47 am

    That’s what I said.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed