How can I align my submit button to the Message text box?

  • Profile Image
    miryun
    Asked on March 04, 2013 at 04:53 AM

    Hi,

    Could you please help me right-align my customized submit button to the right edge of my Message text box?

    Right not, it's slightly shifted to the right.

    Thanks in advance!

  • Profile Image
    Welvin
    Answered on March 04, 2013 at 05:44 AM

    Hi,

    Inject this custom CSS codes to your form:

    #id_2 {

    margin-left: -32px !important;

    }

    Guide: How to Inject Custom CSS Codes

     

    Thanks

  • Profile Image
    miryun
    Answered on March 04, 2013 at 11:52 AM

    Hi Welvin,

    Thanks for your response.

    I tried that, but it didn't seem to work - the button is still in the same place. Is it maybe that I need to erase something from the CSS?

    Thank you.

     

    .form-all
    {
    margin-left: -36px;
    }.form-textbox {width: 220px !important;}.form-textarea {width: 358px !important;}.form-submit-button {box-shadow:none !important;}
    .form-buttons-wrapper{padding-left:100px;}
    .form-textarea {
    font-family: helvetica;
    }
    .form-label-top {font-family: Helvetica !important;font-weight: normal !important;
    #id_2
    {margin-left: -32px !important;
    }

  • Profile Image
    Welvin
    Answered on March 04, 2013 at 11:57 AM

    Hi Miryun,

    I have fixed and clean the custom CSS codes for you. The right codes should be this one: http://pastie.org/6381802

     

    Thanks

  • Profile Image
    Welvin
    Answered on March 04, 2013 at 11:58 AM

    By the way, clear your browsers cache if you still don't see the changes on your end. Thanks

  • Profile Image
    miryun
    Answered on March 04, 2013 at 02:21 PM

    Thanks for that, Welvin

    It seems to be working now, but the placement of the button shifts slightly depending on the browser. For instance, when it's aligned on Firefox, on Chrome it's shifted to the right.

    Is there a way to align it perfectly in a way that it will stay aligned through all browsers? Maybe some kind of wrapping to the text box? I'm not sure

    Thanks a lot in advance!

  • Profile Image
    jefreylandicho
    Answered on March 04, 2013 at 03:41 PM

    Can you please try adding this code in your Form Custom CSS as by using the code, I was able to set the alignment correctly between Chrome and Firefox.

    .form-submit-button { float: right;position:relative; right:10px; }

    If the problem still persists, please contact us again.

  • Profile Image
    miryun
    Answered on March 05, 2013 at 12:38 PM

    Hi jefreylandicho,

    I trid that code but unfortunately, it didn't work. I also tried removing the following part and putting in your code, but that didn't work either. 

    #id_2 {
    margin-left: -26px !important;
    }

    As I have it right now, it's aligned on Firefox and just slightly shifted on Chrome but I would like to ensure that it´s aligned through all browsers if possible (I have no way of checking what it looks like on Internet Explorer)

    Thank you

  • Profile Image
    jefreylandicho
    Answered on March 05, 2013 at 01:18 PM

    Okay can you also please add this code as well 

    .form-submit-button { width: 92px !important; }

    so it would look like

    .form-submit-button { width: 92px !important; }

    .form-submit-button { float: right;position:relative; right:10px; }

  • Profile Image
    miryun
    Answered on March 05, 2013 at 02:06 PM

    Hi,

    Thanks a lot for your help but that´s still not working

    Is there maybe another piece of code on my CSS that's getting on the way of the code you gave me?

    Thanks!

  • Profile Image
    EltonCris
    Answered on March 05, 2013 at 02:43 PM

    @miryun

    Some CSS browser hack may help fixed it. Use the following.

    /*--for chrome--*/

    @media screen and (-webkit-min-device-pixel-ratio:0) {

    #id_2 {

    margin-left: -32px !important;

    }

    }

    /*--for IE7/8--*/

    #id_2 {

    margin-left: -32px\9 !important;

    }

    Just inject this to your form. Thanks!

  • Profile Image
    miryun
    Answered on March 05, 2013 at 02:51 PM

    I can't check IE, but that seems to work on Chrome

    Thanks so much!

  • Profile Image
    EltonCris
    Answered on March 05, 2013 at 02:59 PM

    Great!

    Here's are the screens for IE. ;)

    IE9

     

    IE7 & 8

    Thanks!

  • Profile Image
    miryun
    Answered on March 06, 2013 at 04:17 AM

    Hi EltonCris,

    Thanks for the screenshots!

    Your solution worked great, but I changed the width of my form and the button got moved :S

    I readjusted it's location on Firefox, but could you please help me readjust the values for Chrome and IE just like you did before?

    Thank you so much for your help!


  • Profile Image
    EltonCris
    Answered on March 06, 2013 at 05:26 AM

    Hi,

    Looking back on my previous code, simply change -32px to 180px. It should then look like this.

    /*--for chrome--*/

    @media screen and (-webkit-min-device-pixel-ratio:0) {

    #id_2 {

    margin-left: 180px !important;

    }

    }

     

    /*--for IE7/8--*/

    #id_2 {

    margin-left: 180px\9 !important;

    }

    Thanks!

  • Profile Image
    miryun
    Answered on March 06, 2013 at 06:05 AM

    Perfect. Thanks so much!