CODEWITHSUNDEEP
cssangular
peckoski
peckoski

Reputation: 115

Position relative and absolute does not work in ngFor

I have table where i need to have nested radio buttons and i can select just one of them so for that purpose i have

HTML

<table>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4]; let i = index">
            <td>
                <input type="radio" name="ritemb" />
            </td>
            <td>
                Name
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid black;
    width: 300px;
}

and it works.

But i need to change the color of the selected radio buttons so i googled and found this solution

HTML


<table>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4]; let i = index">
            <td>
                <div class="radio-item">
                    <input type="radio" id="ritemb" name="ritem" value="ropt2">
                    <label for="ritemb">Option 2</label>
                </div>
            </td>
            <td>
                Name
            </td>
        </tr>
    </tbody>
</table>

CSS


table {
    border: 1px solid black;
    width: 300px;
}


.radio-item {
    display: inline-block;
    position: relative;
    padding: 0 6px;
    margin: 10px 0 0;
  }
  
  .radio-item input[type='radio'] {
    display: none;
  }
  
  .radio-item label {
    color: #666;
    font-weight: normal;
  }
  
  .radio-item label:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 5px;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    border: 2px solid #004c97;
    background-color: transparent;
  }
  
  .radio-item input[type=radio]:checked + label:after {
    border-radius: 11px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: 10px;
    content: " ";
    display: block;
    background: red;
  }

but now eve i click on the last adio butons, the first radio button is maked red instead the selected one. I suppose the problem is in the css positions but i can't find a solution

Upvotes: 0

Views: 405

Answers (1)

Brian
Brian

Reputation: 328

The reason for your struggle is that your id did not change, and also not the associated label. By using the interpolation feature from Angular, it is possible to generate a "predictable" id for each radio button.

<table>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4]; let i = index">
            <td>
                <div class="radio-item">
                    <input type="radio" id="ritemb{{i}}" name="ritem" value="ropt2">
                    <label for="ritemb{{i}}">Option {{i}}</label>
                </div>
            </td>
            <td>
                Name
            </td>
        </tr>
    </tbody>
</table>

As per the Mozilla documentation on radio buttons:

They each also have a unique id, which is used by the element's for attribute to associate the labels with the radio buttons.

With a unique label and id per radio button it should work as desired.

Upvotes: 1

Related Questions