1

I have a lot of data to display in my radioGroup, so I would like to display it in multiple columns like this.

Columns aligned

Unfortunately I'm getting some display errors.

Here is the code

<div class="postal-code-list-formatting">
    <lightning-radio-group name="radioGroup"
        label=""
        options={postalCodes}
        value={postalCodeValue}
        type="radio"
        onchange={handleRadioSelection}>
</lightning-radio-group>
</div>
.postal-code-list-formatting {
    font-variant-numeric: tabular-nums;
    column-count: 3;
}

And the result :

RadioButton not entirely clicked

There is an alignment problem . The later columns have more elements and so in the case where there are less elements than the amount of columns, the alignment gets messed up.

I also tried with the html of the lightning design system.

<div  class="postal-code-list-formatting" >
                      <template for:each={postalCodes} for:item="postalCode" >
                        <fieldset key={postalCode.Id} >
                          <div class="slds-form-element__control radiobuttons-container">
                          <span class="slds-radio slds-p-horizontal_small">
                              <input name="radiogroup" id={postalCode.Id} type="radio" value={postalCode.CRS_Zip_Code__c} onchange={handleRadioSelection}/>
                              <label class="slds-radio__label" for={postalCode.Id} >
                                  <span class="slds-radio_faux"></span>
                                  <span class="slds-form-element__label">{postalCode.CRS_Zip_Code__c}</span>
                              </label>
                          </span>
                          </div>
                        </fieldset>
                      </template>
                    </div>

It works fine when there is a scrollbar but when there is none everything appears fine at first but the top labels disappear when I click on a button that is on a column on the left of them.

Labels missing

A workaround I found was to add a margin to the checkbox.

<span class="slds-radio_faux" style="margin:5px"></span>

But this is more of a bandaid than a real solution. Plus it makes every row further apart from one another. What would be the best solution to do this ?

1 Answer 1

1

You probably found already a solution, but just in case...

In your case, I would create 3 different lightning-radio-group with the same name and onchange. So something like this will do the trick

HTML

<div>
    <lightning-layout horizontal-align="left">
        <lightning-layout-item padding="around-small">
            <lightning-radio-group name="radioGroup" onchange={handleRadioChange} options={options1} value={value1} type="radio"></lightning-radio-group>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <lightning-radio-group name="radioGroup" onchange={handleRadioChange} options={options2} value={value2} type="radio"></lightning-radio-group>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <lightning-radio-group name="radioGroup" onchange={handleRadioChange} options={options3} value={value3} type="radio"></lightning-radio-group>
        </lightning-layout-item>
    </lightning-layout>
</div> 

JS

get options1() {
    return [
        { label: '2234', value: '2234' },
        { label: '4434', value: '4434' },
    ];
}
get options2() {
    return [
        { label: '2234', value: '2234' },
        { label: '4434', value: '4434' },
    ];
}
get options3() {
    return [
        { label: '2234', value: '2234' },
        { label: '4434', value: '4434' },
    ];
}

handleRadioChange(event){
    console.log(event.detail.value);
    this.value1 = undefined;
    this.value2 = undefined;
    this.value3 = undefined;

    switch(event.detail.value){
        case '2234':
            this.value1 = event.detail.value;
            break;
        case '4434':
            this.value2 = event.detail.value;
            break;
        default:
        break;
    }
}

Maybe you can also explore other solutions like build your own radio groups, or wrap this piece of code in a LWC ready to be nested, so your parent LWC's code is not that messy. But this is a quick fix that can solve your problem.

Cheers!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.