8 Replies Latest reply on Mar 15, 2010 1:40 PM by Guild1812

    Setting The Length Of A Form Page?

    Guild1812

      Hi,


      I'm building a form page on my site through which users can enter feedback/comments. The problem I'm having is that with each entry, the Form Box (Title, Contents, Name, Email) gets pushed down the page more and more, and eventually off the bottom of the page.


      Could someone please tell me what that refers to, so that I can correct it?


      Thank you.


        • 1. Re: Setting The Length Of A Form Page?
          pziecina Level 6

          Hi

           

          This is probably something you are doing in your code either the html or the css. Can you post a link or an example of the code?

           

          PZ

          www.pziecina.com

          • 2. Re: Setting The Length Of A Form Page?
            Guild1812 Level 1

            After reading what you said, I compared my code to what was in the tutorial I followed. While obviously not the same, I did add repeat-x scroll center top; to mine and it's working to some extent. If I set the Repeat Region to 2 records, the form box stays on the page, and I can click on next, to see the comments on the next pages. But beyond a Repeat Region of 2, I have the same problem.

             

            Thank you.

             

             

            #container {

            width: 968px;

            margin: 0 auto;

            padding-left: 10px;

            padding-right: 10px;

            overflow: hidden;

            }#banner {

            background-image: url(../_images/Artwork/mainbanner.gif);

            height: 200px;

            width: 800px;

            }

            #background {

            background-image: url(../_images/Artwork/bg_conversation.jpg);

            height: 600px;

            width: 800px;

            background-repeat: repeat-x scroll center top;

            }

            .p {

            margin:0px;

            padding:0px;

            font-size: inherit;

            font-family: inherit;

            font-weight: inherit;

            text-align: inherit;

            line-height: inherit;

            vertical-align: top;

            }

            p {

            padding-top:0px;

            margin-top:0px;

            }

            img {

            border:0px;

            background-repeat: no-repeat;

            }

            div {

            font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

            font-size:14px;

            width: 700px;

            font-style: normal;

            font-weight: bold;

            color: #000;

            text-align: left;

            }

            .AbsWrap {

            width: 100%;

            position: relative;

            }

            .rowWrap {

            width: 100%;

            }

            .clearfloat {

            clear:both;

            height:0px;

            }

            a:link, a:visited{

            COLOR:inherit;

            text-decoration:inherit;

            }

            #main {

            width:700px;

            margin: 0px auto 0px 0px;

            padding-left: 47px;

            padding-top: 170px;

            }

            body {

            width: 701px;

            margin: 0 auto;

            padding: 0;

            }

            body, input, textarea {

            font-family: "georgia","times new roman",serif;

            font-size: 10pt;

            line-height: 1.5em;

            }

            h2 {

            color: #303179;

            font-size: 1.9em;

            font-weight: normal;

            margin: 0;

            padding: 20px 0 10px;

            }

            li {

            margin-bottom: 1em;

            }

            p {

            margin-bottom: 0;

            margin-left: 20px;

            }

            a {

            margin: 0 5px;

            }

            strong {

            font-weight: normal;

            }

            input, textarea {

            width: 300px;

            }

            input[type=submit] {

            width: auto;

            }

            #create {

            width: 695px;

            margin-left: 53px;

            }

            #items {

            width: 695px;

            margin-left: 53px;

            }

            • 3. Re: Setting The Length Of A Form Page?
              pziecina Level 6

              Hi

              But beyond a Repeat Region of 2, I have the same problem.

              If you are inserting dynamic data into your page above the form then this will push your form down the page, and unfortunately unless you have a very short form there is little you can do about this.

               

              With a short form you could use the css "position: fixed;" to force the form to be displayed at the bottom page no matter what the length of the content, but this will possibly cause other problems with your design, if you are uncertain of how css works.

               

              PZ

              www.pziecina.com

              • 4. Re: Setting The Length Of A Form Page?
                Guild1812 Level 1

                Getting there w/CSS.

                 

                Where in the code would "position:fixed;" appear?

                • 5. Re: Setting The Length Of A Form Page?
                  pziecina Level 6

                  Hi

                   

                  Wrap your form in a div with the id of fixedform, then insert the following in your css -

                  #fixedform {

                  position: fixed;

                  bottom: 100px;

                  }

                   

                  Insert your measurement from the bottom where I have the 100px in red.

                   

                  PZ

                  www.pziecina.com

                  • 6. Re: Setting The Length Of A Form Page?
                    Guild1812 Level 1

                    The form was already in a div, so I just entered the code into the CSS. The Div/Form is staying in place, but it's appearing over the last comment.

                     

                    I added the code to the items div, as well, but the div/form still appeared over the last comment.

                     

                    I tried putting div id=items and div id=create each inside its own div, and applied the code to the new divs, and basically got the same result.

                     

                     

                     

                    <div id="items">

                      <h2>Spoken</h2>

                      <p><a href="index.php?status=pending">Pending</a> <a href="index.php?status=planned">Planned</a><a href="index.php?status=declined">Declined</a></p><br />

                      <ol>

                        <?php do { ?>

                          <li><strong><?php echo $row_Getclann['title']; ?></strong><br />

                            <?php echo $row_Getclann['contents']; ?><br />

                            by

                            <?php echo $row_Getclann['author_name']; ?>, at <?php echo $row_Getclann['author_email']; ?></li>

                          <?php } while ($row_Getclann = mysql_fetch_assoc($Getclann)); ?>

                      </ol>

                      <p><a href="<?php printf("%s?pageNum_Getclann=%d%s", $currentPage, max(0, $pageNum_Getclann - 1), $queryString_Getclann); ?>">Previous </a>Showing <?php echo ($startRow_Getclann + 1) ?>...<?php echo min($startRow_Getclann + $maxRows_Getclann, $totalRows_Getclann) ?> out of <?php echo $totalRows_Getclann ?> <a href="<?php printf("%s?pageNum_Getclann=%d%s", $currentPage, min($totalPages_Getclann, $pageNum_Getclann + 1), $queryString_Getclann); ?>">Next</a></p>

                      </div>

                      <div id="create">

                        <h2>Say What You Want</h2>

                      <form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1">

                        <table align="center">

                          <tr valign="baseline">

                            <td nowrap="nowrap" align="right">Title:</td>

                            <td><input type="text" name="title" value="" size="32" /></td>

                          </tr>

                          <tr valign="baseline">

                            <td nowrap="nowrap" align="right" valign="top">Contents:</td>

                            <td><textarea name="contents" cols="50" rows="5"></textarea></td>

                          </tr>

                          <tr valign="baseline">

                            <td nowrap="nowrap" align="right">Your_name:</td>

                            <td><input type="text" name="author_name" value="" size="30" /></td>

                          </tr>

                          <tr valign="baseline">

                            <td nowrap="nowrap" align="right">Your_email:</td>

                            <td><input type="text" name="author_email" value="" size="30" /></td>

                          </tr>

                          <tr valign="baseline">

                            <td nowrap="nowrap" align="right"> </td>

                            <td><input type="submit" value="Add" /></td>

                          </tr>

                        </table>

                        <input type="hidden" name="MM_insert" value="form1" />

                      </form>

                    </div>

                    • 7. Re: Setting The Length Of A Form Page?
                      pziecina Level 6

                      Hi

                       

                      As I said the code will fix the form at the bottom of the page, (give it a background color to stop any content below it showing through) it will not make your page bigger, this is up to the user and the size they have set their browser to.

                       

                      Trying to get everything to display inside a browser window is an impossible task unless you use % values for everything, which will almost certainly make your page unusable for many.

                       

                      Instead of using tables for your form use fieldset as this will help you control the 'size' of the form better, see - http://www.w3schools.com/TAGS/tag_fieldset.asp.

                       

                      PZ

                      www.pziecina.com

                      • 8. Re: Setting The Length Of A Form Page?
                        Guild1812 Level 1

                        Guess it's like a lot of things, trial and error.

                         

                        I'll also take another look at the tutorial.

                         

                        Thank you!