Fluid 100% width form

  • Profile Image
    apq
    Asked on September 04, 2012 at 09:40 AM

    Hi!

    I'm creating a responsive website. I have set up a container element for the form that resizes correctly. Now I just want to insert my form in this element. But I can't get my form to resize according to its parent element. I have tried iframe without success. I think that maybe the injected CSS in my form can cause problems but I have tried setting static values to 100% without success.

    So my question is: how can I get my form to go all the way to 100% width of the container?

    This is the injected code for the form:

     .form-textarea, .form-textbox {

    padding: 2px;

    border: solid 1px #AAA;

    outline: 0;

    font-size:12px !important;

    font-family: Verdana, Tahoma, sans-serif;

    width: 100%;

    background: transparent;

    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;

    }

    .form-textarea {

    width: 100%;

    max-width: 100%;

    height: 40px;

    line-height: 100%;

    font-family: Verdana !important;

    }

    input:hover, textarea:hover, input:focus, textarea:focus {

    border-color: #C9C9C9;

    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;

    }

    .form-all{

    float:left;

    padding-top: 0px;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }

    .form-captcha {

    width: 100%;

    }

    img#input_7_captcha.form-captcha-image{

    width: 100% !important;

    }

    input#input_7{

    width:100% !important;

    }

    .form-error-message {display: none !important;}

    .form-label-left {

    display:none;

    }/*--add red border on error--*/

    .form-validation-error {

    border: 1px solid #C85959 !important;

    }

    .form-button-error {

    color: #C85959;

    }

     

    Best regards, Anton.

  • Profile Image
    EduardoMendez
    Answered on September 04, 2012 at 11:54 AM

    Hi, I noticed that you embeded the form ID 21812583257354 on to your container.  The form that is embeded has CSS code that is causing it to change to it's present look.

    Try not to limt the form that will be embeded so that it can adjust tot he container.

    Your form is set to a width of 100px and those values/settings are passed along to the container.

    Let me know if that helps!

  • Profile Image
    apq
    Answered on September 04, 2012 at 02:22 PM

    I noticed that I had set 100% as "Form Width" in Preferences and I think it may have interpreted that as 100px. I changed that to nothing and I did see some change but it still doesn't go all the way too 100% of the parent width.

  • Profile Image
    jeanettebmz
    Answered on September 04, 2012 at 02:56 PM

    Can you please insert this piece of code into your custom css code ?

    .form-all{width:100% !important;}


  • Profile Image
    apq
    Answered on September 05, 2012 at 07:12 AM

    I tried inserting it in my own style.css as well as injecting it as "Custom CSS", neither did anything.

  • Profile Image
    idarktech
    Answered on September 05, 2012 at 07:41 AM

    @apg

    Add this:

    .form-input, .form-textarea, .form-textbox {

    width: 100% !important;

    }

    Hope this helps. Thanks!

  • Profile Image
    idarktech
    Answered on September 05, 2012 at 07:43 AM

    Just updated my codes. Kindly recheck. Thanks!

  • Profile Image
    idarktech
    Answered on September 05, 2012 at 08:02 AM

    @apg,

    I made a little cleaning on your current form's css codes, you may replace all your css codes with this if you like: http://pastebin.com/raw.php?i=JESyHwDQ

    Thank you.

  • Profile Image
    apq
    Answered on September 05, 2012 at 09:06 AM

    It seems to be working now!

    Thank you all for your fast answers! You are very dedicated and I'm happy to see that! :)

    / Anton