Q & A : Even Columns

Recently i was asked,

Q: … the multiple response question Products, is currently in 1 column with 3 sublists (Kitchen,Bedroom,Bathroom). The issue is when I put this into columns it does it evenly rather than displaying each sub list in its own column. So we end up with something like this, which is not what we want.

Not Even

First off we need some metadata, so here it is,

Products "Products sold"
        style(
            Orientation = "Column",
            Columns = 3
        )
    categorical [1..]
    {
        Kitchen "Kitchen"
        {
            Fork,Spoon,Knife,Kettle,Plate,Cup
        } namespace,
        Bedroom "Bedroom"
        {
			Pillow,Sheets,Chair,Lamp
        } namespace,
        Bathroom "Bathroom"
        {
			Soap,Towel,ToothPaste "Tooth Paste"
        } namespace
    };

and then we need the routing,

   Products.Ask()

Now if we have just this , then we end up with an image above , but if we change our metadata , and add some blank spare responses to even up the numbers like so,

Products "Products sold"
        style(
            Orientation = "Column",
            Columns = 3
        )
    categorical [1..]
    {
        Kitchen "Kitchen"
        {
            Fork "Fork",
            Spoon "Spoon",
            Knife "Knife",
            Kettle "Kettle",
            Plate "Plate",
            Cup "Cup"
        } namespace,
        Bedroom "Bedroom"
        {
            Pillow "Pillow",
            Sheets "Sheets",
            Chair "Chair",
            Lamp "Lamp",
            Spare1 "",
            Spare2 ""
        } namespace,
        Bathroom "Bathroom"
        {
            Soap "Soap",
            Towel "Towel",
            ToothPaste "Tooth Paste",
            Spare3 "",
            Spare4 "",
            Spare5 ""
        } namespace
    };

And then in our routing hide the spare responses,

Routing(Web)

Products.Categories["Bedroom"].categories["Spare1"].Style.Hidden = true
Products.Categories["Bedroom"].categories["Spare2"].Style.Hidden = true
Products.Categories["Bathroom"].categories["Spare3"].Style.Hidden = true
Products.Categories["Bathroom"].categories["Spare4"].Style.Hidden = true
Products.Categories["Bathroom"].categories["Spare5"].Style.Hidden = true

    Products.Ask()

End Routing

You end up with everything nice and even like this

Even Columns

4 thoughts on “Q & A : Even Columns”

  1. You need to be careful when using .Style.Hidden as not all browsers support this. This would lead to checkboxes with no text next to them. When using this technique, you should add validation code to check that none of the “spare” items were selected (or at least check that one or more valid responses were selected).

  2. Hi,
    Interesting dilemma šŸ™‚ I played around with this this morning and the only thing I could come up with is CSS integration.

    In the example you provided, I created the following HTML template and more specifically CSS solution:

    #Cell.0.7, #Cell.0.8, #Cell.0.9, #Cell.0.10, #Cell.0.11 {
    position: relative;
    left: 100px;
    top: -135px;
    }

    #Cell.0.12, #Cell.0.13, #Cell.0.14, #Cell.0.15 {
    position: relative;
    left: 200px;
    top: -230px;
    }

    while this does work fairly well, not sure about cross browser compatibility or how it renders in a HTML template that already controls the styling of the webpage, but ‘food for thought’ and it negates the requirements for ’empty’ categorical responses and validation of these hidden elements.

    Of course, this is not the most reliable solution for an ongoing project where changes might be made, as you’ll need to potentially add Id references for the ‘Cell’ iterations and ‘tweak’ the relative positioning …

    Let me know if you end up using this and if so, what modifications you had to make – so we can share a more robust solution with the community

    Kind regards
    Rich

  3. Hi

    Instead of .Style.Hidden = true you may use .Style.Control.Type=controltypes.ctStatic :

    Products.Categories[“Bedroom”].categories[“Spare1”].Style.Control.Type=controltypes.ctStatic
    Products.Categories[“Bedroom”].categories[“Spare2”].Style.Control.Type=controltypes.ctStatic
    Products.Categories[“Bathroom”].categories[“Spare3”].Style.Control.Type=controltypes.ctStatic
    Products.Categories[“Bathroom”].categories[“Spare4”].Style.Control.Type=controltypes.ctStatic
    Products.Categories[“Bathroom”].categories[“Spare5”].Style.Control.Type=controltypes.ctStatic

    regards

Leave a Comment

%d bloggers like this: