Button outer circle is drawn incorrectly

[Shirikatsu]

The outer circle of the button that indicates selection is drawn with the same radius as the inner circle rendering something that looks like this:

Due to its smaller size but apparent same origin of drawing, the outer circle has displaced itself up and to the left, causing misalignment as well.

This happens with the example code also. I am not sure if there is a conflict in modules so here is my React project dependencies:

[SH-Stark]

I have the same :)

[zivester]

Same thing, and it's definitely caused by [email protected].

[wesleycole]

Same issue, and I don't have bootstrap installed.

[agustinramos]

use in css "box-sizing: content-box" on parent div

[hsimah]

You need to include iconSize as an attribute of your RadioButton. I set mine to 20.

    <RadioButton value={value} key={index} iconSize={20} >
        {display}
    </RadioButton>

[nathanielmoon]

Neither of these solutions worked for me, but I just wrapped the RadioGroup in a div with class "radio" and used this css to hide the circles until better fixes roll in or I'm cured of laziness and make my own:

.radio > div > div > div > div > div:nth-child(2) { display: none; }

[MaxiSantos]

Adding the iconSize={20} solved the issue for me.

[chrislangston]

I was able to get the RadioIcon looking decent using the following:

<ReversedRadioButton pointColor={ '#0c58ca' } iconSize={ 50 } iconInnerSize={ 40 } value="five"> <span style={{ fontSize: '22px', color: 'black'}}>Five </ReversedRadioButton>

Note: In my case I needed to make the circles much larger for an easier click experience.

[DavidHayesCoding]

following on from the fix by @nightCapLounge I figured out that the problem was the box-sizing method used by bootstrap and probably a lot of other frameworks. Overriding that for just the outer div of the rings fixed it for me.

.radio > div > div > div > div:nth-child(2)
{
  box-sizing: content-box;
}