This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 3

Checkbox Alignment


  1. sapan
    Member

    Hello, currently there are 4 options available to arrange the check boxes - one column, two column, three column and inline. How can i add four column and five column options in order to display the check boxes in 4 or 5 columns?

    Thanks

    Posted 11 years ago #
  2. nicklap
    Member

    Hi Sapan,

    I may have you wrong, but if you create 5 different checkbox fields and then use "column_5" in the custom css class section of each field, it should create what you want...

    Nick

    Posted 11 years ago #
  3. sapan
    Member

    Hi Nick, thanks for your reply but that is not what i want. I have a question in my survey with 10 check boxes each with different options, an user can select all or atleast one needed to be checked. In the current format i have arrange all the checkboxes in three columns which will make 4 rows instead of that i want to make them in 5 columns and 2 rows.

    "column_5" css class will work where i have different questions or fields but in my case there is only one question and i want the columns to be 5. I hope you understand.

    Thanks

    Posted 11 years ago #
  4. williamansley
    Member

    I can offer a clumsy workaround. If you choose "Inline" from the "Choice Columns" menu, then you can add non-breaking spaces to the individual check box labels, at the end of the label text, until you force the check boxes to wrap the way you want them to for your particular form. You must type " " repeatedly after the label name to add the non-breaking spaces; regular spaces will be ignored (just as in html). As you type " " into the label field for a check box, you will see the first few characters appear in the form preview, but they will be replaced by a space when you have typed the complete html entity. You will have to view your form to make sure the spacing works the way you want it to; the form preview will probably not show the same line wrapping as your "live" form. Be aware that when you go back to edit your check box label field later, the non-breaking spaces will look like regular spaces.

    This is not pretty, but I think it will give you want you want. Hopefully, Yuniar and company will add more column choices for check boxes as a feature upgrade to an upcoming release of Machform 3.x.

    Posted 11 years ago #
  5. sapan
    Member

    Thanks williamansley, i will give a try but still looking for a concrete solution. One question, can you explain me what exactly is the work of the Advance CSS option?

    Thanks

    Posted 11 years ago #
  6. williamansley
    Member

    I see that my post didn't come through accurately. Where you see " " it should read " " I am putting my code in "backticks" this time, so hopefully it will show up.

    Posted 11 years ago #
  7. williamansley
    Member

    OK, that worked. Here is my post reposted, with the non-breaking space html entities properly displayed. It should make more sense now, although I realize it may be too kludgy for you:

    If you choose "Inline" from the "Choice Columns" menu, then you can add non-breaking spaces to the individual check box labels, at the end of the label text, until you force the check boxes to wrap the way you want them to for your particular form. You must type " " repeatedly after the label name to add the non-breaking spaces; regular spaces will be ignored (just as in html). As you type " " into the label field for a check box, you will see the first few characters appear in the form preview, but they will be replaced by a space when you have typed the complete html entity. You will have to view your form to make sure the spacing works the way you want it to; the form preview will probably not show the same line wrapping as your "live" form. Be aware that when you go back to edit your check box label field later, the non-breaking spaces will look like regular spaces.

    Posted 11 years ago #
  8. williamansley
    Member

    As to your other question, the "Advanced CSS" option in the theme designer lets you paste in your own CSS code to override the code already "built in to" the theme. You could, in theory, I believe, use this to override the formatting of check boxes and give them the formatting you want, but I am only a user on this forum, and not an expert one by any means, so I can't offer you any more hints on what you would need to change to do this. The CSS files for the forms and custom themes are apparently stored in the data folder, so you could start by taking a look there, although I would advise against editing these files directly.

    Posted 11 years ago #
  9. williamansley
    Member

    I shouldn't have taken the time to look at this any more today, but I got caught up finding a better answer.

    Here is another, still somewhat kludgy, theme/CSS based way to get more than three columns of check boxes. This *redefines* the inline check box option, so it will no longer be available to give you inline check boxes in any form that uses the new theme that you will create; forms that use other themes will still have properly functioning inline check boxes. Instead, choosing "Inline" will give you five rows of check boxes (or whatever number you end up editing it to provide). To add more choices to the interface (one column, two columns, three columns, four columns, five columns, inline), you would have to modify some of the baseline code files, and that is very far outside my level of expertise and I am not going to try to tackle it.

    Try this: Create a new theme or duplicate the one you are already using. Open the "Advanced CSS" window for that theme and paste this in:

    #main_body form li.inline_columns div span {
      margin:0 6px 0 0;
      width:18%;
    }

    Save the theme and apply it to your form. Edit the check box fields that you want to make have five columns and choose "Inline", then view the form. You may have to change the number in the line width:18%; until you get the number of columns you want, depending on the width of your form. If you want four columns, make the number larger; if you want 6 or more columns, make the number smaller.

    I hope this helps.

    Posted 11 years ago #
  10. sapan
    Member

    thank you so much for all your efforts, i will give a try and will see how things works.

    Posted 11 years ago #

RSS feed for this topic

Reply