Input Radio button space issue

Live Link

Primary Source code: https://codepen.io/multicelldesign/pen/LGNdKV

whatever CSS i knew till date I failed to decrease the space as shown in the image →

image

Hi, only a couple of changes need to be made.

CSS

The space between input and text is due to input that has not been hidden. Fix:

.md-radio__input { display: none; }

Finally, you can also change the space between radio input and text using following instruction:

.md-radio__custom { margin-left: 1px; }
1 Like

Thanks. I have replicated the whole issue here for further discussion →

what was the utility of this part:


/* .md-radio.with--error .md-radio__label-text,
.md-radio.with--error .md-radio__add-text {
  color: #d32f2f;
}
.md-radio.with--error .md-radio__custom {
  border-color: #d32f2f !important;
}
.md-radio.with--error .md-radio__custom .md-radio__custom-inner {
  background-color: #d32f2f !important;
} */

Removing doesn’t make any loss?

In this if we delete any label why other labels falls one under another:

despite we are using this:

flex-basis: 200px;
    flex-grow:1;

There are two margins in place. There is a 3px default margin on the hidden radio (It has opacity:0 and a 1px width and height). there is also an 8px left margin on the new radio image.

e.g.

.md-radio__input {margin:0}
.md-radio__custom {margin-right:0}

Probably better not to display:none the radio as I believe that has accessibility and submission issues.

I didn’t see that in the codepen but I’m guessing that if you add that class then it will show as a
styled error input. It’s probably something you would use during validation to show the input has been missed.

I’m not sure what the question is exactly?

The input and labels are in a nested flexbox so if you wanted prodlicen to stretch across then you’d need to set flex grow.

e.g.

.prodlicen{flex:1 0 0%}

1 Like

Sir, In this codepen:

If we delete any label then all reaming child flex items falls in one columns despite there is enough space.

.md-radio {
    /* position: relative; */
    display: flex;
    flex-basis: 200px;
    flex-grow:1;

Dear @PaulOB sir,
I have figure out the issue. Please ignore my last question so that energy can be focused on helping someone else.

No there is no space.:slight_smile: If you add a background color to that container you will see that there is no space because of a previous parents flex alignment. You need the rule that I gave you above to stretch the container.

OK :slight_smile:

2 Likes

Yes, I realized my mistake later. Thank you so much.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.