How should we implement this UI in mendix? It should be a list of data from which we should only be able to select one row through radio button

0
  This a UI which I need to implement and it should be list which will be retrieved through association & should only select one through radio button Help to suggest solution for this on urgent basis
asked
1 answers
0

Hi Anjali,

 

add a radio buttons widget to your page, give it a custom class name (here: vertical-radios).

 

Then you can add styling to your main.scss like this:

.vertical-radios .mx-radiogroup {

    flex-direction: column !important;
    width: 100%;

    > div {
        margin: 5px !important;
        padding: 5px;
        background-color: #DFDFD9;

        &:has(input[type=radio]:checked) {
            border: 1px solid black;
        }

        &:not(:has(input[type=radio]:checked)) {
            border: 1px solid transparent;
        }

        > label {
            padding: 5px;
            color: #fff;
            width: 50%;
            background-color: #880015;
        }
    }
}

 

The radio buttons then look like this:

radiogroup.jpg

 

Hope that helps!

 

Best,

Holger

answered