Request: Allow Column-Spread Checkboxes to be Column-Aligned, not just Row-Aligned

  • Profile Image
    earthdaysf
    Asked on March 01, 2013 at 05:22 AM

    first, vertical white-spacing in inconsistent: none in-between some vertical boxes, and lots between others. This makes it look totally inconsistent and messy and unprofessional. There should be an equal amount of space VERTICALLY between each option. 

    To look professional, there will be EQUAL VERTICAL WHITE SPACE between buttons in the same column. 

    The problem is your table-like layout. Giving each option equal vertical space, regardless of how little text they have, causes the options to appear mis-aligned and unequally spaced, due to different amounts of text on each option. The option with the most text forces all the other checkboxes in that row to have excess white-space under them. 

    It's not necessary for each button to be top-aligned with checkboxes in other columnns. It's much more important for the VERTICAL WHITE SPACE between the TEXT to be consistent. 

    apply an equal top or botton margin or padding below THE TEXT, NOT below the checkbox. 

    For example, the pic in my 2nd post below looks MUCH better, because the vertical white space is the same. 

    Another problem is the indenting. the ones that are crammed together are difficult to read. The text from one option flows right into the text of the option next to it, so you cannot tell which text goes with which button.

    It should be a hanging indent, like my 2nd post below. That means, when text wraps it should not extend to the margin under the checkbox. There should be NO TEXT UNDER the checkbox. The left edge of ALL text should be aligned. 

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 05:30 AM

    here's an example of how it should be laid out. 

    Hanging indent, the way bulleted lists are indented. The left edge of the text lines up with itself, not with the bullet. This would prevent text in the first column from touching text in the 2nd column.

    Here are a few way you can do this:

    This method seems simplest:
    http://heo-iforms.blogspot.com/2012/08/line-wrap-after-checkbox-use-hanging.html

    Other ways:

    http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers

    http://bytes.com/topic/html-css/answers/99329-nicely-wrapped-checkboxes-labels

    http://stackoverflow.com/questions/11809/how-to-create-an-all-browser-compatible-hanging-indent-style-in-css-in-a-span

  • Profile Image
    EltonCris
    Answered on March 01, 2013 at 09:12 AM

    Hi,

    Thanks for your input.

    The styling you'd like to achieve can be done with Custom CSS Injection. You can use the following CSS codes.

     

    .form-multiple-column .form-checkbox-item {

    width: 150px;

    text-indent: -21px !important;

    margin-left: 21px !important;

    padding-bottom: 15px !important;

    margin-right: 21px !important;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Feel free to adjust the values to get the desired result or if you want further changes. Thanks!

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 09:41 AM

    thanks, that's an improvement. 

    but now we have too much white space. 

    how can we eliminate all the extra white space?

    again, we do not need side-by-side checkboxes top-aligned. Please see my example above. 

  • Profile Image
    jefreylandicho
    Answered on March 01, 2013 at 10:15 AM

    Try adding this code in your custom css

    .checkbox-item { margin: 0!important; }

    .form-multiple-column .form-checkbox-item { padding-bottom: 0px !important; }

    Also, I would recommend formatting the label as shown below.



  • Profile Image
    pinoytech
    Answered on March 01, 2013 at 10:21 AM

    Hi earthdaysf,

    Sorry for the inconvenience that may have caused. To eliminate the extra white space, just simply remove this code "padding-bottom: 15px !important;" from the custom css code that you have injected in to your form. So, it should be only

    .form-multiple-column .form-checkbox-item {

    width: 150px;

    text-indent: -21px !important;

    margin-left: 21px !important;

    margin-right: 21px !important;

    }

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 10:29 AM

    problem still exists. here's my entire css injection:

     

    .form-multiple-column .form-checkbox-item {

    width: 150px;

    text-indent: -21px !important;

    margin-left: 21px !important;

    margin-right: 21px !important;

    }

    pinoytech, i think you do not understand what i am asking. I want EQUAL white-space between vertical items. No big gaps, as we see here. 

    jefreylandicho, i do not understand what you mean about label format. 

  • Profile Image
    jefreylandicho
    Answered on March 01, 2013 at 11:04 AM

    The  label format is how you set the text width.  I would suggest shortening the Security and Early setup up text or increase your label width as it produces the white gaps.

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 11:12 AM

    ok i see. but that's not really a fix to this problem, that's avoiding the problem by changing something else. If i cannot shorten my long text, then the problem remains. 

    this control is designed to keep side-by-side checkboxes top-aligned with each other. But, i do not need that. 

  • Profile Image
    pinoytech
    Answered on March 01, 2013 at 12:06 PM

    Hi,

    Sorry about that. What about change the sequence of your checkbox item.

    Instead of:

    Security (only time slots available are from 8am-12am , 12pm-4pm and 4pm to 8pm)

    Donation buckets/Greeters

    Stage Management

    Hospitality

    Early set up crew (stages, vendor layout, barricades, tents. Only available 4am-8am and 8am-12pm) 

    Beer and Wine (must be 21+)

    Kid zone

    Other/as needed

    To:

    Security (only time slots available are from 8am-12am , 12pm-4pm and 4pm to 8pm)

    Early set up crew (stages, vendor layout, barricades, tents. Only available 4am-8am and 8am-12pm) 

    Donation buckets/Greeters

    Stage Management

    Hospitality

    Beer and Wine (must be 21+)

    Kid zone

    Other/as needed

    It should be look like this:

    I think, thats the only way to achieve what you want.

    Thank you!

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 03:52 PM

    again, that's not fixing the problem, it's rearranging my verbiage to avoid the problem. That's not a solution.

    Your rearrangement of my verbiage still has gaps. 

    This is undesired. 

    Is anyone able to explain, in technical terms, with reference to html, css, or javascript, exactly why this is the case?

  • Profile Image
    jonathan
    Answered on March 01, 2013 at 05:24 PM

    @earthdaysf 

    Thank you for this information. 

    I will elevate this to our next level support so it can be granted a feature request ticket.

    From what I can understand so far, it is not a bug, -- but a feature that requires adjustment on the application back-end code (I have no means to know if its the stylesheet, javascript, or html since I cannot see the back-end codes).

    I will indicate on the request ticket how the checkboxes questions are auto aligned on "top" that causes mis-aligned and with gaps in between, specifically when the checkbox questions have longer text on it.

    Simply put, I think "symmetry" is what we want to achieve here when the checkboxes are in spread column and there is a text that stands out due to its lenght.

    Thanks.

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 05:28 PM

    thank you very much. I agree it's not a bug, it's a request.

    Thank you everyone who contributed to this thread. JotForm is great, and the support team is super!

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

    While waiting from our developers updates, you can try it with this CSS codes. http://pastie.org/pastes/6362749/text. Just replace all your existing CSS codes with this and let us know your thoughts. Thanks!

  • Profile Image
    earthdaysf
    Answered on March 01, 2013 at 11:01 PM

    hi, i do appreciate that, but it appears that your css references the specific ID's in my form, right?

    I'm still editing my form, so any changes to the affected checkboxes will break your css, right?

    Is is possible to modify your css to make it work with any checkboxes?

    Your css gives me what i need in data-entry mode, but this is how it looks in the editor:

    Not a big problem, since the options can be edited in the toolbar.

    thanks

  • Profile Image
    EltonCris
    Answered on March 02, 2013 at 12:25 AM

    This is how it looks on the live view. It may not display properly on edit view probably due to the canvas spacing but viewing it live should reveal the expected result.

    Yes, I have added the field "ID" in purpose since it is for that field specifically. Unfortunately it is not possible for global use. We'd suggest to finish your form first so we can adjust the CSS codes for you if you like.

    Thanks!

  • Profile Image
    abajan
    Answered on March 03, 2013 at 12:16 PM

    @earthdaysf

    In your form's current state, the following CSS seems to work:

    .form-checkbox-item {
    text-indent: -21px !important;
    margin-left: 21px !important;
    margin-right: 21px !important;
    }

    .form-label-top,
    .form-label-left,
    .form-label-right {
    font-weight: bold;
    }

    #id_30 .form-multiple-column
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item {
    margin-top: 4px;
    }

    #id_30 .form-multiple-column
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item {
    margin-top: -47px;
    }

    #id_30 .form-multiple-column
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item {
    margin-top: -47px;
    margin-left: 213px !important;
    }

    #id_30 .form-multiple-column
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item {
    margin-top: -30px;
    margin-left: 21px !important;
    }

    #id_30 .form-multiple-column
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item +
    .clearfix +
    .form-checkbox-item {
    margin-top: -81px;
    margin-left: 213px !important;
    }

    However, like my colleague has stated, finish the form and we'll take it from there.

  • Profile Image
    earthdaysf
    Answered on March 03, 2013 at 05:25 PM

    thanks, but my form will continue to undergo edits, so css for today's verbiage will break next time i change the verbiage. So thanks, but that's highly inefficient. 

    my current css is only:

    .form-checkbox-item {
    text-indent: -21px !important;
    margin-left: 20px !important;
    margin-right: 30px !important
    }

  • Profile Image
    Mdzsolutions
    Answered on March 03, 2013 at 06:09 PM

    @earthdaysf, 

    I understand your opinion on the layout, however, I must dissagree in terms of the look of the deafult behavior.  I find your version much less organized not to have the checkboxes horizontally aligned... confusing to the eye.  I wouldn't want my forms layed out that way by default.  It's more natural to have the pattern of a spreadsheet.  Just my opinion...

    Thanks for all that CSS.  I can definately use it. :)

  • Profile Image
    earthdaysf
    Answered on March 03, 2013 at 06:33 PM

    well it is a matter of opinion. I read a column of checkboxes the way i read a column of text in a newspaper: from top to bottom. I read from the top of the 1st column, down to the bottom of the 1st column. Then my eye jumps back up to the top of the 2nd column, and i read down to the bottom of the 2nd column. 

    Read in that fashion, my flow is interrupted by the large vertical gaps between some items, and no gaps between other items. 

    My eye is not concerned with alignment of the tops of checkboxes going horizontally, any more than my eye would notice the alignment of tops of paragraphs in side-by-side columns in a newspaper. 

    That's just me, but i suspect most people see columns that way-- as columns in a newspaper. 

    The white space i inserted between the columns in this image accentuates the perception of each column as a separate visual group. 

    Here's my css:

     

    .form-checkbox-item {
    text-indent: -21px !important;
    margin-left: 20px !important;
    margin-right: 30px !important;
    margin-bottom: 5px !important}

    .form-multiple-column .form-checkbox-item {width:40% !important;}

    Cheers.

  • Profile Image
    EltonCris
    Answered on March 04, 2013 at 12:37 AM

    Hi Guys,

    Thanks for all your opinions, we appreciate that.

    Like Mdzsolutions I would still prefer the horizontal alignment as most users prefer that way, just my observation. However, the alignment for the check box labels looks nicer for me so I hope our team would consider this request hopefully.

    If there are any improvements about this feature request, we'll update you here. Thanks and have nice day!

  • Profile Image
    earthdaysf
    Answered on March 04, 2013 at 03:23 AM

    i think neither of us knows what most users prefer. however, i believe the columnar layout of newspapers all over the world for the last century or two, supports my preference. Ideally, both options would be available in the control properties. 

    Glad you agree hanging indent looks nicer. 

    Or did you mean widening the columns?

    I think both are key.

    thanks

  • Profile Image
    abajan
    Answered on March 04, 2013 at 04:20 AM

    Yes, I think we can all agree that hanging indents look far better. Incidentally, it's probably better to use ems or percentages instead of pixels, as I've done in this demo's CSS. The thing is, while the alignment is correct at the default zoom, in Chrome and Safari it gets offset as you zoom in [Ctrl + num+] and out [Ctrl + num-]. This doesn't happen in Firefox when you zoom in but it does when you zoom out. Of the major browsers, only Opera and (surprisingly) IE get it right.

    As to the checkboxes all being top-aligned, I honestly can't decide which looks better. Initially, I thought that it looked better with the boxes horizontally aligned but your point about reading newspaper columns from top to bottom (and therefore there being no concern about alignment with check boxes in other columns) is certainly valid. And now that I've looked at the most recent update to your form, I think it would indeed look better if the vertical whitespace between the check box items were equal. (By the way, for that particular check box field, I think it would look better if the whitespace between the items were increased a bit, like in my demo. The multi-lined labels make the items seem too close to each other.)

    You would no doubt have also noticed that with multi-column check box fields, the items are added from left to right (rows) instead of from the top down (columns). I think that's how the idea of top aligned check boxes came about.

    As you've stated, the ideal would be to have both options available (and thus do away with all this injected CSS stuff!).

    Thanks for your suggestion. We certainly value feedback like this, as it helps us to improve our product.

    Cheers.

  • Profile Image
    earthdaysf
    Answered on March 04, 2013 at 12:06 PM

    "items are added from left to right (rows) instead of from the top down (columns)."

    Ok, then i would suggest the options be:

    Layout:

        -Horizontal
        -Vertical

    where 'Horizontal' is exactly what jotform does now,
    and 'Vertical' is the layout i prefer, with items added top-down, and no vertical gaps. 

    Thanks!