What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    shorten field labels on shrunken fields

    Asked by NRCsupport on March 11, 2014 at 05:02 PM

    Is there any simple css code that I could apply to all left hand labels on shrunken fields so that the labels' width is limited to the space actually needed for the label. At present with short labels, they are much closer to the field they follow than they are to the field thay are labelling.

    I know that I could tinker with each such label individully, but I'd rather have a general solution that would apply to all such fields.

    label css code solution all
  • Profile Image
    JotForm Support

    Answered by EltonCris on March 11, 2014 at 07:19 PM

    Hi,

    You can use the following for shrunken fields with labels on the left.

    .form-line-column .form-label-left {

    width: 110px !important;

    }

    Just replace 110px to your preference and inject it to your form.

    Hope this helps!

  • Profile Image

    Answered by NRCsupport on March 11, 2014 at 07:46 PM

    Thanks. Unfortunately the inline css (presumably before the section where the inserted css goes contains this:-

    .form-label-left {
        width: 160px !important;
    }

    The !important stops this being overridden by what you suggest, so the suggestion actually does nothing.

    Is there any way to override that?

  • Profile Image

    Answered by Cesar on March 11, 2014 at 08:46 PM

    Kindly provide the FormURL you are working this on. Presumably, if the code

    .form-label-left {
        width: 160px !important;
    }

    was injected to your form. You would need to have it removed from the Inject CSS Code field to prioritize the code provided by my colleague. To avoid calling the same element twice.

    Do let us know the information requested to further assist you. Thank you.

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 11, 2014 at 09:06 PM

    @NRCsupport

    Thanks.

    It seems to work just fine on my test. The provided CSS code does not override the default label width for non-shrunken fields. Or perhaps I've missed something here? Please let me know. :)

    The code should only take effect on the shrunken fields with label left. Check this: http://form.jotformpro.com/form/40698176317968?.

    If you can provide the form in question we will check and investigate it further.

    Thanks!

     

  • Profile Image

    Answered by NRCsupport on March 12, 2014 at 03:45 AM

    Thanks for both the above.

    The form-label-left{width: 160px!important;} seems to be what is put there by the label width defined in preferences>field styles>label width. The firefox inspector shows it as inline css, but it is not part of the injected css.

    I have retried what I was doing, and now get the same result as you. There must have been a typing error in the css I inserted. I couldn't spot any difference from what you sent, but I deleted it, and retyped it and it worked.

    Sadly though this does not solve my original question. I wanted to be able to set those field labels to be only as wide as needed for their contents, so I really need to be able to use max-width rather than width. Although from what I've read about css, max-width is supposed to override width, this does not seem to be true in firefox, as putting max-width in the injected css does not work here. So what would really help me solve this would be if the css created by preferences>field styles>label width could set min-width and max-width instead of width. It should set both min-width and max-width to the chosen width value. These could then be over-ridden by injected min-width and max-width values, giving the effect I want.

    (Should I put this suggestion in as a new thread?)

  • Profile Image
    JotForm Support

    Answered by jonathan on March 12, 2014 at 07:08 AM

    Hi,

    Have you tried using the CSS code to your form?

    .form-label-left {

        max-width: 300px !important;

    }

     

    I tested this on our colleague's sample form and it seems to work on FF browser.

     

    Hope this help. Kindly inform us if you need further clarification.

    Thanks!

  • Profile Image

    Answered by NRCsupport on March 12, 2014 at 02:08 PM

    Many thanks. To start with that did not work. The left hand label width was still being controlled by that

    .form-label-left {
        width: 160px !important;
    }

    I have now confirmed that this was there because I had set label width to 160 pixels in
    preferences>field styles>label width. I have deleted that setting, and that injected css has gone away. So now now my min-width and max-width definitions for both normal field and shrunken field left hand labels work as I want. (So the answer is don't use the preferences label width setting if you intend to do some private adjustments as well).

    I think this may well satisfy my earlier request for various ways to set label width (whichI understand is under consideration). It would still be nice to be able to do these things directly in the form builder, rather than by manually injecting css code.

  • Profile Image

    Answered by NRCsupport on March 12, 2014 at 04:16 PM

    Oh dear, it has failed again.

    That form_label_left setting reappeared the next time I opened the form. The only time it worked was when I deleted the label width and immediately ran a preview. At that stage there was no .form_label_left code in the predefined part of the css, so my min-width and max-width statements worked. But as soon as I closed and reopened the form there was a defined label width in preferences>field styles>label width, and that immovable line in the css.

    My problem is that I don't want to set one label width for normal fields and another for shrunken fields, i want to be able to set minimum and maximum label widths for normal fields and minimum and maximim label widths for shrunken fields. I believe this would work if it were possible to delete the automatic setting of a label width - or as I suggested before to set min and max values, both defaulting to the label width specified, but (hopefully) overridable by injected css.

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 12, 2014 at 07:01 PM

    @NRCsupport

    Thanks.

    That's because the form builder doesn't save null value on the form label except when you put 0 in it. Instead of removing the value, how about using auto width? I think this will help? You can inject this CSS.

    Example:

    .form-label-left {

    width: auto !important;

    }

    If this doesn't help, I think the last option is to use your form source code so you can get rid of the default form CSS codes and control it with your new CSS codes.

    Thank you.

  • Profile Image

    Answered by NRCsupport on March 12, 2014 at 07:55 PM

    Thanks, yet again.

    Using auto seems to help. So far it has then let me use min-width and max-width as well as auto, and I am getting more or less what I want on this form. I may need to insert extra css instructions manually for a few fields.

    By the way putting 0 into the preference label width doesn't help. It actually set the label width to 0.

    I don't really want to edit form source code because (a) I want to leave the form on your server and (b) I don't want to have an edit which I would need to remember to reinsert each timeI changed the form.

  • Profile Image

    Answered by NRCsupport on March 13, 2014 at 01:28 PM

    Just to let you know that width:auto has solved this particular problem. I've now got my field layout as I want it. Ive had to put in a few bits of css, for example where I actually want to force a short label actual have the same width as assigned to long ones (e.g. to keep a column of fields lined up.)

    This has led me to put in yet another feature request about automatically inserting filler characters in short labels.

  • Profile Image
    JotForm Support

    Answered by Mike_T on March 13, 2014 at 04:37 PM

    Thank you for your update NRCsupport. We will consider your new feature request and get back to you.