Change the size of "This field is required"?

  • Profile Image
    Lunatic447
    Asked on July 23, 2011 at 02:54 PM

    Hi again.

    Can I change the size or the length of the error message, which appears when someone didn't filled a required field?

    I mean..

  • Profile Image
    abajan
    Answered on July 23, 2011 at 04:48 PM

    Hi Lunatic447

    Thanks for asking. The width of that message can be shortened by injecting the following CSS:

    .form-line-error {
    width:275px;
    }

    You may adjust the value of the width to suit but there appears to be a limit to how short it can be.

    If you need help with anything else, please feel free to post it on the forum. Our team will be glad to assist you as best as we can.


    ~ Wayne

  • Profile Image
    Lunatic447
    Answered on July 23, 2011 at 05:10 PM

    Thank you Abajan.

    Now the panel has the right size.. But another problem came along.

     

    The arrangement of the other panels are doing weird stuff, after the error message appeared.

    What can I do to avoid this re-positioning?

     

    See..

     

  • Profile Image
    abajan
    Answered on July 23, 2011 at 06:23 PM

    Hi again

    There are probably a number of ways to overcome that problem but adding a background declaration to the rule I provided above should solve the problem:

    .form-line-error {
    width:275px;
    background:transparent repeat scroll 0 0;
    }

    Please let us know if this helps.

    Thanks.


    ~ Wayne

    EDIT: Oops! I see yet another problem: The label disappears when the error is triggered. I'll see if I can find out what else needs to be done to solve that.

  • Profile Image
    abajan
    Answered on July 23, 2011 at 06:47 PM

    Okay, here we go again. Add the following rule to what I have already provided:

    .form-line-error .form-label-top {
    color: #D4B098
    }

    So, the total CSS to inject to give the error message a shorter width would be:

    .form-line-error {
    width:275px;
    background:transparent repeat scroll 0 0;
    }
    .form-line-error .form-label-top {
    color: #D4B098
    }


    Cheers :)

    P.S. You may need to change the value of the color declaration to suit your requirements.

  • Profile Image
    Lunatic447
    Answered on July 24, 2011 at 06:23 AM

    Thanks for the trouble!

    But.. The problem is still there :/ Maybe an other css rule do the conflict.

    Here is all my injected css so far:

     

     

        /* Injected CSS Code */

    .form-submit-button {

    padding:0;

    margin:0;

    border:none;

    font-size:0.1px;

    background: url(http://dl.dropbox.com/u/2935685/AnotherWebsite/PicData/sendit1.png) no-repeat center;

    height:36px;

    width:114px;

    }


    .form-submit-button:hover {

    padding:0;

    margin:0;

    border:none;

    font-size:0.1px;

    background: url(http://dl.dropbox.com/u/2935685/AnotherWebsite/PicData/sendit2.png) no-repeat center;

    height:36px;

    width:114px;

    }


    textarea {

    resize:none;

    }


    .form-textarea {

    background-color:rgba(50,50,50,0.3);

    color:#CCC;

    border-color:#333;

    border-style:dashed;

    }


    .form-line-error {

    width:225px;

    background:transparent repeat scroll 0 0;

    }

    .form-line-error .form-label-top {

    color: #D4B098

    }


    div.form-input-wide div.form-error-message {

    background-color:lightgrey;

    }

    .form-error-arrow-inner {

    border-color: transparent transparent lightgrey;

    }


    .form-line-active {

    background:none;

    }



        /* Injected CSS Code */

  • Profile Image
    abajan
    Answered on July 24, 2011 at 11:40 AM

    Hi again

    Could I see the page within which the form is embedded? As you said, there might be other CSS rules conflicting with what has been injected. If that's the case, using the !important keyword in a couple of the rules I provided might do the trick but I would rather see the form in the context of the page within which it's embedded to get a better idea of why the rules aren't working as expected.

    Thanks.


    ~ Wayne

  • Profile Image
    abajan
    Answered on July 24, 2011 at 12:03 PM

    Hang on... I think I've spotted a mistake in the code...

    Stay tuned! :)

  • Profile Image
    Lunatic447
    Answered on July 24, 2011 at 12:07 PM

    Sure I will post the page. I hope you can fix this problem ;)

    Here you go: LINK

     

    EDIT: Damn, you were faster :D

    Ok, I will wait for your feedback.

     

    -Martin

  • Profile Image
    abajan
    Answered on July 24, 2011 at 01:40 PM

    Yes, I was faster :)

    Anyway, when I checked the page at the link, it seems there's more going on than what I initially thought. When one of the required fields is clicked, its label vanishes! And where on earth is the submit button?

    The mistake to which I was referring in my code was that it was adjusting the width of the wrong element. Substitute the following for what I earlier provided:

    .form-line-error {
    background:transparent repeat scroll 0 0;
    }
    .form-line-error .form-label-top {
    color: #D4B098;
    }
    .form-error-message {
    width:225px;
    }

    So your injected code in its entirety should look like this:

    .form-submit-button {
    padding:0;
    margin:0;
    border:none;
    font-size:0.1px;
    background: url(http://dl.dropbox.com/u/2935685/AnotherWebsite/PicData/sendit1.png) no-repeat center;
    height:36px;
    width:114px;
    }

    .form-submit-button:hover {
    padding:0;
    margin:0;
    border:none;
    font-size:0.1px;
    background: url(http://dl.dropbox.com/u/2935685/AnotherWebsite/PicData/sendit2.png) no-repeat center;
    height:36px;
    width:114px;
    }

    textarea {
    resize:none;
    }

    .form-textarea {
    background-color:rgba(50,50,50,0.3);
    color:#CCC;
    border-color:#333;
    border-style:dashed;
    }

    .form-line-error {
    background:transparent repeat scroll 0 0;
    }

    .form-error-message {
    width:225px;
    }

    .form-line-error .form-label-top {
    color: #D4B098;
    }

    div.form-input-wide div.form-error-message {
    background-color:lightgrey;
    }

    .form-error-arrow-inner {
    border-color: transparent transparent lightgrey;
    }

    .form-line-active {
    background:none;
    }


    That should stop the fields from shifting all over the place.
    I'll see if I can look at the other issues I mentioned later. 


    ~ Wayne

    P.S. Oftentimes problems with these forms can usually be overcome by embedding them via iFrames instead of their full source.

  • Profile Image
    Lunatic447
    Answered on July 24, 2011 at 02:15 PM

    There we go! Nice work, thanks.

    The "shifting" problem is solved.. But I have another problem with my site. It's offtopic but really important for me. Why does my page cut off at the bottom when I zoom in, or the resolution is very small? Better I do a screenshot, my english isn't very well..

     

    Oh and btw, the submit button is disabled by a condition. It will show up when somebody filled the form.

  • Profile Image
    abajan
    Answered on July 24, 2011 at 06:06 PM

    Hi again

    I don't know why it cuts off at the bottom. However, here's a tip to make the condition attached to the submit button function better. Also, here's how to stop the label from vanishing when the input is clicked.

    Glad the other issues were resolved.


    ~ Wayne