The purpose of shrink and expand options

  • randypotterschool
    Asked on November 24, 2014 at 8:42 AM
    2 - How can I make fields appear next to each other rather than just above and below?  Is this done using the shrink/expand functionality?  Or does that have some other purpose?  Just trying to get a better understanding. 
  • Ben
    Replied on November 24, 2014 at 10:37 AM

    Hi Blair,

    Yes, you are correct that is done by the usage of shrink option.

    How do they work?

    Shrink

    Usually one field will be added on its own line and that is good in many cases as it allows us to quickly and easily create different options and have them laid out in a presentable manner. Now sometimes we want to have several fields in one line instead for multiple reasons and no matter what they are, we use Shrink option to do it.

    Shrink is available when you right click on the widget/tool or on the little gear wheel in the right of the widget.

    The purpose of shrink and expand options Image 1 Screenshot 50

    If we shrink some field it will no longer consume entire row, just the minimum amount of space it needs to.

    Now if we shrink several fields one after another, they will all start following one another and combine a chain of as many fields as it is possible to stay on that line/ row, which depends on their own width and the jotforms width.

    Expand

    Expand is only available when we have shrunk a field. Its purpose is to restore the field into a big row allowing us to edit the jotform easier, or to just change back the layout.

    As soon as it expands, it will break the chain if it was located between several shrunk field placing itself on a new line between them.

    The purpose of shrink and expand options Image 2 Screenshot 61

    There are 2 more interesting options available that come together with shrink and expand.

    Move to a new line

    You may want to have 10 smaller fields one after another, but only 2 per row/line. Now to fix that you should click on the 3rd one in the row (in our example) and select Move to a new line option. This will in turn leave it as it is (shrunken), but will in the same time move it to a new line.

    Now in our example we would need to do this 4 times. You could also apply shrink option to all of them and set them all on a new line if that is something you want to achieve.

    The purpose of shrink and expand options Image 3 Screenshot 72

    Merge to above line

    If you change your mind and want to restore the tool/widget back in the chain you can do that with this option - merge to above line. It will leave the applied shrink attribute, but will just remove the attribute set by the Move to a new line option.

    The purpose of shrink and expand options Image 4 Screenshot 83

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • randypotterschool
    Replied on November 24, 2014 at 11:24 AM

    Very helpful.  This confirms my understand and I very much appreciate the thorough response!

  • Ben
    Replied on November 24, 2014 at 12:20 PM

    Hi Blair,

    You are welcome, I am glad that you found it helpful and that it confirmed what you thought.

    Do let us know if you have any further questions.

    Best Regards,
    Ben