Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css animation causes submit button to be missed

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #42979
    snapey
    Member

    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?

    #126099
    pixelgrid
    Participant

    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

    #131762
    snapey
    Member

    The problem described in Chris’s latest video is related: https://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.

    #131777
    CrocoDillon
    Participant

    That’s what I said.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.