Radio labels being pushed away from radio
I'm trying to create a radio group using Material-UI and am running into a very frustrating problem: The text labels for the radios are floating outside of the bounds of the radio group. This causes the labels to break on spaces even when there is ample space, and to overlap with other components.
In the attached screenshots, the radio group is inside its own grid, which spans the full width of the screen and has an md={12}, so one would guess that there is no need for line breaking, but the "Per row" label still breaks regardless, as if there was no space available for the full label.
Increasing the width with width: 500px(for example) in the FormControl moves the radio svg to the center of the space, but still pushes the label farther away, and the "Per row" labels continues to break.
The root FormControl element is highlighted. As you can see, there is a lot of horizontal space surrounding the svg, and the labels break on white space.
The same element, with the width increased to 500 via style.
Below is the code for the full Grid container:
return(
<Grid container
direction="row"
>
<Grid item
md={12}
>
<FormControl>
<RadioGroup
aria-label="Source language"
name="sourceLangType"
>
<FormControlLabel
control={ <Radio color="primary"/>}
label="Global"/>
<FormControlLabel
control={<Radio color="primary"/>}
label="Per row" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
);
This doesn't happen with the Material-UI example. Inspecting the html shows that the label is fully contained in the root element's space. I tried copying the code verbatim and it resulted in the labels being pushed away.
Can anyone shed some light on what's happening and how I can fix this? Thank you very much in advance.
html css reactjs radio-button material-ui
asked Nov 22 '18 at 14:27
TumaTuma
137212
add a comment |
I'm trying to create a radio group using Material-UI and am running into a very frustrating problem: The text labels for the radios are floating outside of the bounds of the radio group. This causes the labels to break on spaces even when there is ample space, and to overlap with other components.
In the attached screenshots, the radio group is inside its own grid, which spans the full width of the screen and has an md={12}, so one would guess that there is no need for line breaking, but the "Per row" label still breaks regardless, as if there was no space available for the full label.
Increasing the width with width: 500px(for example) in the FormControl moves the radio svg to the center of the space, but still pushes the label farther away, and the "Per row" labels continues to break.
The root FormControl element is highlighted. As you can see, there is a lot of horizontal space surrounding the svg, and the labels break on white space.
The same element, with the width increased to 500 via style.
Below is the code for the full Grid container:
return(
<Grid container
direction="row"
>
<Grid item
md={12}
>
<FormControl>
<RadioGroup
aria-label="Source language"
name="sourceLangType"
>
<FormControlLabel
control={ <Radio color="primary"/>}
label="Global"/>
<FormControlLabel
control={<Radio color="primary"/>}
label="Per row" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
);
This doesn't happen with the Material-UI example. Inspecting the html shows that the label is fully contained in the root element's space. I tried copying the code verbatim and it resulted in the labels being pushed away.
Can anyone shed some light on what's happening and how I can fix this? Thank you very much in advance.
html css reactjs radio-button material-ui
asked Nov 22 '18 at 14:27
TumaTuma
137212
add a comment |
I'm trying to create a radio group using Material-UI and am running into a very frustrating problem: The text labels for the radios are floating outside of the bounds of the radio group. This causes the labels to break on spaces even when there is ample space, and to overlap with other components.
In the attached screenshots, the radio group is inside its own grid, which spans the full width of the screen and has an md={12}, so one would guess that there is no need for line breaking, but the "Per row" label still breaks regardless, as if there was no space available for the full label.
Increasing the width with width: 500px(for example) in the FormControl moves the radio svg to the center of the space, but still pushes the label farther away, and the "Per row" labels continues to break.
The root FormControl element is highlighted. As you can see, there is a lot of horizontal space surrounding the svg, and the labels break on white space.
The same element, with the width increased to 500 via style.
Below is the code for the full Grid container:
return(
<Grid container
direction="row"
>
<Grid item
md={12}
>
<FormControl>
<RadioGroup
aria-label="Source language"
name="sourceLangType"
>
<FormControlLabel
control={ <Radio color="primary"/>}
label="Global"/>
<FormControlLabel
control={<Radio color="primary"/>}
label="Per row" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
);
This doesn't happen with the Material-UI example. Inspecting the html shows that the label is fully contained in the root element's space. I tried copying the code verbatim and it resulted in the labels being pushed away.
Can anyone shed some light on what's happening and how I can fix this? Thank you very much in advance.
html css reactjs radio-button material-ui
asked Nov 22 '18 at 14:27
TumaTuma
137212
I'm trying to create a radio group using Material-UI and am running into a very frustrating problem: The text labels for the radios are floating outside of the bounds of the radio group. This causes the labels to break on spaces even when there is ample space, and to overlap with other components.
In the attached screenshots, the radio group is inside its own grid, which spans the full width of the screen and has an md={12}, so one would guess that there is no need for line breaking, but the "Per row" label still breaks regardless, as if there was no space available for the full label.
Increasing the width with width: 500px(for example) in the FormControl moves the radio svg to the center of the space, but still pushes the label farther away, and the "Per row" labels continues to break.
The root FormControl element is highlighted. As you can see, there is a lot of horizontal space surrounding the svg, and the labels break on white space.
The same element, with the width increased to 500 via style.
Below is the code for the full Grid container:
return(
<Grid container
direction="row"
>
<Grid item
md={12}
>
<FormControl>
<RadioGroup
aria-label="Source language"
name="sourceLangType"
>
<FormControlLabel
control={ <Radio color="primary"/>}
label="Global"/>
<FormControlLabel
control={<Radio color="primary"/>}
label="Per row" />
</RadioGroup>
</FormControl>
</Grid>
</Grid>
);
This doesn't happen with the Material-UI example. Inspecting the html shows that the label is fully contained in the root element's space. I tried copying the code verbatim and it resulted in the labels being pushed away.
Can anyone shed some light on what's happening and how I can fix this? Thank you very much in advance.
html css reactjs radio-button material-ui
html css reactjs radio-button material-ui
asked Nov 22 '18 at 14:27
TumaTuma
137212
asked Nov 22 '18 at 14:27
TumaTuma
137212
edited Nov 22 '18 at 14:51
Tuma
asked Nov 22 '18 at 14:27
TumaTuma
137212
asked Nov 22 '18 at 14:27
TumaTuma
137212
asked Nov 22 '18 at 14:27
TumaTuma
137212
137212
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433083%2fradio-labels-being-pushed-away-from-radio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433083%2fradio-labels-being-pushed-away-from-radio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
