SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Arrow Error Message Text Not Wrapping within Parent Div

    Hello everyone,

    I know I continue to bombard with questions about this form, but this should be my last question for a while.

    Inside the #submissionform div, there is another div near the bottom with the i.d. of #errormessage, which contains a <p> element that the JavaScript appends a message to if the form submission is found to be invalid. The reason I put a div around this <p> element is to keep the submit buttons below from bouncing up and down when the form is either submitted or form is canceled/reset, and that seemed to prevent the buttons from moving by having a fixed height on the div. I can put the error message below the submit buttons, but I like where it is now.

    So, I noticed that the error messages were appearing to just run along and not wrap around inside the #submissionform div, and it also wouldn't wrap itself within the width of the actual #errormessage div. So, I tried to find out why this was happening by adding a border to the error message div. I tried quite a few different styles, but I found that I'm stumped... again.

    I put in a long string of gibberish just to display what is happening when the text reaches beyond the width at which I desire it to wrap around into a different line.
    Here is a screenshot of what I'm describing.

    Here is the form markup:
    HTML Code:
          <div id="submissionform"> <!-- begin 2nd form markup -->
            <form name="form2" method="post" action="Scripts/confirmform.php">
              <div>
                <label for="confirmemail" class="fixedwidth">Confirm your e-mail:<span class="required">*</span></label>
                <input type="text" name="confirmemail" id="confirmemail" value="" maxlength="60" class="inputwidth" />
              </div>
              <div>
                <label for="name" class="fixedwidth">Enter your name:<span class="required">*</span></label>
                <input type="text" name="name" id="name" value="" maxlength="60" class="inputwidth" />
              </div>
              <div>
                <label for="age" class="fixedwidth">Select your age range:</label>
                <select name="age" id="age" class="inputwidth">
                  <option selected="selected">Select an Age Range</option>
                  <option>18-35</option>
                  <option>36-55</option>
                  <option>55+</option>
                  <option>17 or younger</option>
                </select>
              </div>
              <div>
              	 <label for="gender" class="fixedwidth">Select your gender:</label>
                 <select name="gender" class="inputwidth" id="gender">
                   <option selected="selected">Select Gender</option>
                   <option>Male</option>
                   <option>Female</option>
                 </select>
              </div>
              <div>
                <label for="country" class="fixedwidth">Select your location:<span class="required">*</span></label>
                <select name="country" id="country" class="inputwidth">
                  <option selected="selected">Select Country</option>
                  <option>United States</option>
                  <option>United Kingdom</option>
                  <option>Canada</option>
                  <option>Australia</option>
                  <option>Russia</option>
                  <option>Brazil</option>
                  <option>Africa</option>
                  <option>Somewhere else</option>
                </select>
              </div>
                <p id="spamtext">To prevent spam, please answer:<span class="required">*</span></p>
              	<label for="addition" id="math"></label>
                <input name="addition" id="addition" value="" maxlength="3" />
                <div id="errormessage">
              		<p>aweoigjaoigjoaipwejpgawiojgpoiajgioawhppoarghoapwergiowerjhiopawhgwfgwiopioapwj</p>
                </div>
                  <label for="aicatcher" class="aicatcher">Please leave this field blank:</label>
              	  <input type="text" name="aicatcher" class="aicatcher" id="aicatcher" value="" />
              <input type="submit" value="Sign Me Up!" class="formsubmitbutton" id="finalsubmit"/>
              <input type="reset" value="Cancel" class="formsubmitbutton" id="cancel"/>      
            </form>
          </div>
        </div>
    Here are the styles related to the form:
    Code:
    #submissionform{
    	background:url("emailsubmission.gif") no-repeat scroll 50% 0 transparent;
    	width:330px;
    	height:320px;
    	position:absolute;
    	display:none;
    	top:260px;
    	left:130px;
    	z-index:1;
    	padding:60px 10px 0 20px;
    	text-align:left;
    }
    #submissionform div{padding-bottom:3px;}
    
    .fixedwidth{
    	width:150px;
    	float:left;
    }
    .inputwidth{width:170px;}
    .required{color:red;}
    
    .formsubmitbutton{margin-left:50px; margin-top:18px;}
    
    #errormessage{border:double; color:red; height:40px; padding:0 16px 4px 9px; font-weight:bold; font-size:15px;}
    #errormessage p{margin:0; padding:0;}
    #errormessage a{color:#09C;}
    #errormessage a:hover{color:#0CC; text-decoration:none;}
    Many thanks as always. I'm almost done with this project.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's not realistic to have a long line of text like that with no breaks. That will break your design in any context. Anyhow, you can force text to wrap with

    Code:
    #errormessage p {word-wrap: break-word;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, spaces do work wonders. No need for the typical "Lorem ipsum" whatever, but it seems to be working a little better with the spaces.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •