Reponsive Radio Button
Please check this code, I want the small dot inside radio button to be centered , I knew I can do this using position but when screen size changes the small circle changes it position which is not good for responsiveness, plz suggest the best practice to make this radio button responsive and in center in every screen, thanks
https://codepen.io/hamzacodepen951/pen/wvQYvab
12 Replies
did you put position relative on the parent when using absolute ?
No i did not
I make parent relative but didnot use absoloute
Maybe using % is the trick, those should scale.
could you try if feasible?
I checked this as well, and saw the changes, could you please explain me what you do and why you do it?
Also text for genders came down now
Adding to what @mannix_ has suggested you need to give the parent (label) a position relative. Also, an alternative method to define the actual position of the "dot" is to use inset and margin auto.
https://codepen.io/cbolson/pen/MWzPYXq
I have also added
display: flex to the labels to ensure that the radio button and text are vertically centeredFirst we put
position relative on the parent so the child will not escape it if use position absolute on it. So if we want put something in the middle we do left of 50% and top of 50% but that will put top left corner of that dot in the center so we need to translate the dot by -50% up and to the left so the point is in the center of the dot not in the top left corner. As to text coming down i put display: inline-flex on the label and removed the margin-top from button to fix it.
oh i also modified the size of the button to rounded the numbers
you can check the update penSolved this for someone else
https://codepen.io/koffiemetschaap/pen/KKreWQE
Thank you all of you, I will check and study each one and ask if did not understand any thing.
.radio_button label .radio_check_button::before {
content: "";
border-radius: 50%;
background-color: var(--primary-color-light);
transform: scale(0);
/* chris /
/ remove these to be replaced with new properties below /
/ width: 10.5px; /
/ height: 10.5px; /
/ display: inline-block; /
position: absolute; inset:3px; / distance from edge / margin:auto; / center within parent - increase or decrease this for the size of the dot / transition: transform 150ms ease-in; / just to add some animation */ } .radio_button label input:checked + .radio_check_button::before { transform: scale(1); } Chris, I didnot understand what actually happening for small dot, I knew inset is shorthand property for top bottom left right, but really dont know what margin and inset is doing here, could you please help me to understand? you did not give width and height to small dot, then how it is having a size?
position: absolute; inset:3px; / distance from edge / margin:auto; / center within parent - increase or decrease this for the size of the dot / transition: transform 150ms ease-in; / just to add some animation */ } .radio_button label input:checked + .radio_check_button::before { transform: scale(1); } Chris, I didnot understand what actually happening for small dot, I knew inset is shorthand property for top bottom left right, but really dont know what margin and inset is doing here, could you please help me to understand? you did not give width and height to small dot, then how it is having a size?
the dot size comes from 100% of the parent size minus 3px from each side because of the inset
if you play with the inset the dot will change its size
margin auto makes sure the dot stays in the center by applying equal amount of margin on each side
have just realized that I put my comment regarding changing the size of the dot alongside the margin property rather than the inset property - this may have confused things)Thank you all of you, from all the options I use the flex one, that is reallly simple