How can I decrease the size of a textarea?- reposition zipcode field

  • Profile Image
    djmgmt
    Asked on February 26, 2015 at 01:59 PM

    I cant figure out why my text area for "zip code" is so big. I do not want it to be so wide! I messed around with the css coding but have had no luck. Help!

  • Profile Image
    bkljaic
    Answered on February 26, 2015 at 02:27 PM

    Hi,

    You need to apply custom CSS in order to change size of text area. Inside of your form go to Setup & Embed, then click on Preferences. Select Form Style tab and inside of Inject Custom CSS field at the end of existing code add this part of code:

    #input_22{

    width:150px;

    height:30px;

    }

    Changing the parameters width and height will give you the desired size of text area.

    Hope this will help. 

  • Profile Image
    djmgmt
    Answered on February 26, 2015 at 03:00 PM

    it worked wonderfully thank you!

    But how do I get the field to sit next to "zip code" instead of below it?

  • Profile Image
    bkljaic
    Answered on February 26, 2015 at 03:41 PM

    Hi, 

    If you want that text field is next to "zip code" instead of below it try adding this code:

    float: right;

    margin-right: 22px;

    margin-top: -45px;

    Your code need to be inside #input_22 element. That means that with this changes code will look like this:

    #input_22{

    width:150px;

    height:30px;

    float: right;

    margin-right: 22px;

    margin-top: -45px;

    }

    Hope this will help.

  • Profile Image
    djmgmt
    Answered on February 26, 2015 at 04:17 PM

    That worked wonderfully as well, hopefully my last issue but if you enter information into the field, part of it disappears.  What am I doing wrong?

  • Profile Image
    bkljaic
    Answered on February 26, 2015 at 04:17 PM

    I see that now you have problem with input value that you are adding inside of Zip code field.

    To fix that just add :

    padding-left: 10 px 

    inside of #input_22 element.

    Hope this will help.

     

  • Profile Image
    djmgmt
    Answered on February 26, 2015 at 04:24 PM

    I added it inside of the #input_22 element and it didnt solve the problem.

  • Profile Image
    bkljaic
    Answered on February 26, 2015 at 04:38 PM

    Instead of code i mentioned in last comment add:

    .form-textbox{

    padding-left:10px;

    }

  • Profile Image
    djmgmt
    Answered on February 26, 2015 at 05:12 PM

    works perfect thank you!

  • Profile Image
    raul
    Answered on February 26, 2015 at 06:25 PM

    I'm glad to know that the code provided by @bkljaic worked for you.

    Feel free to contact us again if further assistance is required.
    Thank you.