0
102
ViewsAntd radio circle falls outside
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
1 answers
Answer question0
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 :)