Grow your CSS skills. Land your dream job.

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 http://codepen.io/anon/pen/fecLI

    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 button.you 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

    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: http://css-tricks.com/video-screencasts/123-if-it-moves-when-you-click-make-something-stick/#more-21048 – 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.

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