Antd radio circle falls outside

Question

I using radio button in React js App. And lately i noticed that in radio button cicrle falls outside the button. I thought maybe there are something wrong with margins, paddings. But when i removed all margins, styles, classNames and so on. Issue still didn't dissapear. When i tried to use the same ANTD component in another page, it was the same problem. I didn't use any specific styles in index.css Did anyone had this issue before with ANTD Radio Sorry i didn't provide any code. But i don't even have anything to provide. I literelly deleted everything that was possible

Answer 1

Create a css file for your component and add the following css. Your issue is most probably due to the position property which is overriden by some other css

position should be position: absolute;

default antd .ant-radio-inner::after should be as follows

.ant-radio-inner::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    background-color: #1890ff;
    border-top: 0;
    border-left: 0;
    border-radius: 16px;
    transform: scale(0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    content: ' ';
}

When position property is removed from above class you get this issue, check the following screenshot

After removing position: absolute; property

After adding position: absolute; property:

I hope this helps you.., Thank you :)