Forums

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

Home Forums CSS How is the effect done to extend a form and have your footer pull down with it?

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #32515
    jesb
    Participant

    I’m working on my 1st website, and my form I have it locked in place which also works, but for the user to see more of their text they are writing they need to scroll up and down, but it’s obviously far more intuitive for the user to be able to extend the form as much as they need.

    The effect is pretty much in almost all forms you see.

    How exactly is this effect achieved?

    If your confused on what effect I mean, look at a site like membership.thinkvitamin.com/ and select the contact link, pull down the form and you’ll see this effect of the footer extending further to allow the form to extend with the page.

    #48987
    richtestani
    Member

    Your explanation isn’t clear but I’m going to take a stab and say you are referring to the textarea elements in Safari. Safari specifically allows you to make your textarea larger if you want by dragging the corner. Other browsers do not offer this functionality.

    #48989
    jesb
    Participant

    This is my form, basically you see that it has a scroll bar to view your text with no option to pull it down and extend it. How do I make it like the example of the site I gave that allows you to pull the form down and as you do you see the footer pulling down with it. I hope that clears it up more.

    pic of my form

    #48990
    chrisburton
    Participant

    Not true. Google Chrome also allows this option.


    @Jesb
    , If you’re using textarea, I believe it depends on the browser for this functionality.

    #48970
    jesb
    Participant

    So what can I do to make my form be used in a way that other sites are doing forms? I’d like to do it in this way as it’s easier to see all that your typing, in it’s current form the user would need to scroll up and down to view their text.

    #48892
    chrisburton
    Participant

    it can be as simple as

    #48895
    jesb
    Participant

    Doing that doesn’t achieve the effect I want. If I do that the form overlaps and extends, the background behind the form field and the footer don’t extend with it. So you end up with something ugly like this.

    pic of what happens when I pull the form down

    #48896
    chrisburton
    Participant

    set min and max width and change height to auto on form

    Live Preview here

    #48898
    jesb
    Participant

    Making those changes allows me to pull the form down, but still it’s only the form field pulling down. The bg of the form stays where it is, it ends up doing what I posted in the pic.

    #48909
    chrisburton
    Participant

    I probably didn’t explain that well and I’m hoping you fiddled with my code and are not just looking for answers.

    No one can help you if you do not provide your code.

    #48303
    richtestani
    Member

    @jesp The function you are mentioning is not a standard HTML feature. Browsers manufacturers have implemented this as a helpful feature.

    You cannot turn this on or off with HTML or CSS. As @ChristopherBurton mentions, you can control the width and height either by defining rows & columns attributes or specifying a width & height in CSS.

    #48238
    cssloser
    Member

    put the form element on top the footer. and if you have already done something to center both elements, then just give the form a height equivalent to auto . height:auto;

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.