0

I would like to use a Radio Group of Button Type:

<lightning:radioGroup name="radioButtonGroup"
                          label="Radio Button Group"
                          options="{! v.options }"
                          value="{! v.value }"
                          type="button"/>

But I would like each button to display separately like they are independent.

I've tried this CSS:

.THIS .slds-radio_button-group {
    border: none;
}

.THIS .slds-radio_button {
    border-radius: 0.25rem !important;
    margin-right: 10px;
}

But the corners are not curved

7
  • in that case, why not use lighting:input components of type checkbox? you will have more control over the css and how to distribute them in your layout
    – glls
    Mar 27 '19 at 13:47
  • @glls I still want only one to be selectable.
    – Robs
    Mar 27 '19 at 13:47
  • you can use individual input components and have only one selected at a time
    – glls
    Mar 27 '19 at 13:48
  • @glls sure, but then I need to write code to manage that. I would like a css solution :)
    – Robs
    Mar 27 '19 at 13:49
  • css solutions are not always the cleanest, specially when it comes to modifying namespaced components. Additionally, is there any reason why you are not using lighting web components?
    – glls
    Mar 27 '19 at 13:50
2

the actual dom rendered by the component does not match your selector:

enter image description here

.THIS div.slds-radio_button-group{
    border: none;
}

.THIS label.slds-radio_button__label {
    border-radius: 0.25rem !important;
}

would actually target each of your radio-buttons, additionally, you should avoid using !important

as this could potentially affect any other component that shared the selector. Instead, expand your selector to further specify the element you want to affect with your styling.

Directly modifying the css of namespaced components like this is not really recommended, and you should instead render your own lighnting:input eventhough it might mean further adding code to your javascript controller (which is not overly complicated).

modifying a lightning component css

14
  • 1
    no - I used a radioGroup component, this component actually renders what you see in the screenshot. I used the code sample provided in the components library developer.salesforce.com/docs/component-library/bundle/…
    – glls
    Mar 27 '19 at 14:04
  • 1
    well - in the end it still comes down to you not using the right selectors, ive updated the answer with the appropriate screenshot, radioGroup type and selector. this should at least get you started
    – glls
    Mar 27 '19 at 14:14
  • 1
    what context is your componet in ? lex, lighting communities?
    – glls
    Mar 27 '19 at 14:18
  • 1
    you might have to play around with the selectors and/or cehck that other components are not overriding yours (some other !important 's that you might have in the community) - I used my component in a lighting community and it works.
    – glls
    Mar 27 '19 at 14:22
  • 1

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.