Trying to reduce label width

  • Profile Image
    richgeasey
    Asked on February 01, 2013 at 03:01 PM

    I have almost all of the details done. I have a form width of 160 pixels, the label width seems to be set to 140, but it seems bigger than that.

    http://www.jotform.com/?formID=30306317111134

    I want to shrink the width down by about 10 pixels. What have I missed here??

    Thanks!

  • Profile Image
    jefreylandicho
    Answered on February 01, 2013 at 03:11 PM

    Hi

    You can try injecting a custom css. To know how, please check the link below

    http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes

  • Profile Image
    richgeasey
    Answered on February 01, 2013 at 03:28 PM

    Ummmm, well OK. I looked at the list on that post and there is nothing about changing the width of the label.

    I am curious as to why that feature does not seem to change the label width from the menu. It seems this is a pretty basic function.

  • Profile Image
    jefreylandicho
    Answered on February 01, 2013 at 03:43 PM

    Try adding this code in your form css

    .form-label-left {
    width140px !important;
    }
    if you need to shrink it more, you can adjust the 140px to another value
  • Profile Image
    richgeasey
    Answered on February 01, 2013 at 04:12 PM

    Jeffrey, thanks for this suggestion. I tried it without success, I also thought maybe 140 was just not enough. So I dropped it to 100 and still no change. I must be missing something simple as I suspect folks do this all the time!

  • Profile Image
    jefreylandicho
    Answered on February 01, 2013 at 04:26 PM

    Did you use the form style to adjust it before like the video below

    http://screencast.com/t/AZbH3cjo

     

    You can also add this code to remove the padding on your label

    .form-label-left {

    padding: 3px 0px 3px 0px !important;

    }

  • Profile Image
    richgeasey
    Answered on February 01, 2013 at 04:34 PM

    Yes, I did what the video showed first thing, before I asked any questions. 

     

    I added that bit of code without any change. Might want to check what I have under the CSS to see if some of this is stomping over each other.

  • Profile Image
    jefreylandicho
    Answered on February 01, 2013 at 04:37 PM

    After changing the css, did you clear your browser cache? Also try re-embedding the code

  • Profile Image
    richgeasey
    Answered on February 01, 2013 at 05:10 PM

    Did both with no results. It still surprises me that the label width function does not work. That's what it is for.

  • Profile Image
    EltonCris
    Answered on February 01, 2013 at 08:56 PM

    Hi Rich,

    Let me please clarify this.

    First, your form doesn't have any form labels anymore since you've already hide them thru CSS. Therefore, changing the label width via Form Builder will not show any changes.

    Second, you are using Free Text HTML as your field label, this is different from the built in label on any fields.

    So to adjust the width of the label inside the Free Text HTML simply edit its content via Form Builder. You can use Shift + Enter key on your keyboard if you'd like to bring down the text into a new line. But as of checking your form, I think you've figured it out already.

    Let us know if you need anything else. Thanks!

  • Profile Image
    richgeasey
    Answered on February 01, 2013 at 09:26 PM

    OK, I found out what I want. I want to change the field where the entry goes (with the hint text). I found a preferences field that works and I am set!

    Thanks

  • Profile Image
    EltonCris
    Answered on February 01, 2013 at 10:11 PM

    That's great then. 

    Cheers! =)