I am trying to use a!cardChoiceField but need capability to adjust the size of the cards, specifically make them wider. The documentations says to put the card choices component in a columns layout with a specified width to control the number of cards in each row. How do I do it?
Discussion posts and replies are publicly visible
As mentioned in documentation to use columns layout . along with number of card to be displayed in a row . so if one row give the for loop as 1 else divide the card list and provide the enumerate(<number of rows>)+1
here is code for one row . Width can be "AUTO" (default), "EXTRA_NARROW", "NARROW", "NARROW_PLUS", "MEDIUM", "MEDIUM_PLUS", "WIDE", "WIDE_PLUS", "1X", "2X", "3X", "4X", "5X", "6X", "7X", "8X", "9X", "10X".
a!localVariables( local!save, local!data: todatasubset( { { id: 1, name: "A" }, { id: 2, name: "B" }, { id: 3, name: "C" } }, a!pagingInfo(1, - 1) ), { a!sectionLayout( label: "Select your company's industry", labelSize: "LARGE", contents: { a!columnsLayout( columns: { a!forEach( items: {1}, expression: a!columnLayout( width: "WIDE", contents: a!cardChoiceField( label: "Select your company's industry", labelPosition: "COLLAPSED", instructions: "Don't see your company's industry listed? Contact our team to add your industry to our community!", data: todatasubset( { { id: 1, name: "A" }, { id: 2, name: "B" }, { id: 3, name: "C" } }, a!pagingInfo(1, - 1) ), cardTemplate: a!cardTemplateBarTextStacked( id: fv!data.id, primaryText: fv!data.name, ), value: local!save, saveInto: local!save, maxSelections: 1, align: "START", showShadow: false, validations: {} ) )) }) } ) })