Mixing
How to make Material-UI Snackbar not take up the whole screen width using anchorOrigin?
I have a class in React which uses an input field which is part of the website header:
If the input is invalid then I want to display a snackbar. I'm using Material-UI components.
The problem is I defined anchorOrigin to be center and top as per Material-UI API. However the snackbar takes up the whole screen width while I want it to only take up the top center location of the screen. My message is quite short, for example "Value invalid" but if it's longer then I should be able to use newlines. I'm not sure if there's some setting in Material-UI API to alter this (I couldn't find one) or I need to use CSS.
This is my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarMessage from './SnackbarMessage.js';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class Test extends Component {
state = {
appId: '',
snackBarOpen: false
}
render() {
return (
<div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
value={'test'} />
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<SnackbarMessage
variant="warning"
message={"test message"}
/>
</Snackbar>
</div>
)
}
}
css reactjs
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
add a comment |
I have a class in React which uses an input field which is part of the website header:
If the input is invalid then I want to display a snackbar. I'm using Material-UI components.
The problem is I defined anchorOrigin to be center and top as per Material-UI API. However the snackbar takes up the whole screen width while I want it to only take up the top center location of the screen. My message is quite short, for example "Value invalid" but if it's longer then I should be able to use newlines. I'm not sure if there's some setting in Material-UI API to alter this (I couldn't find one) or I need to use CSS.
This is my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarMessage from './SnackbarMessage.js';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class Test extends Component {
state = {
appId: '',
snackBarOpen: false
}
render() {
return (
<div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
value={'test'} />
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<SnackbarMessage
variant="warning"
message={"test message"}
/>
</Snackbar>
</div>
)
}
}
css reactjs
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
1
I don't see import statements forSnackbarandSnackbarMessage... How is the above code even running? Also, in the material-ui examples forSnackbarit does not take the entire screen width. Try to inspect the element and see where the 100% width is coming from.
– o4ohel
Nov 22 '18 at 5:06
@o4ohel I found from Chrome's inspect tool thatSnackbarMessagehas the following CSS:@media (max-width: 959.95px) <style>…</style> .MuiSnackbarContent-root-169 { flex-grow: 1; }. When I disableflex-growthe snackbar doesn't take up the whole width. I tried adding style toSnackbarMessageto manually setflex-growto 0 but this doesn't work.
– hitchhiker
Nov 22 '18 at 6:20
add a comment |
I have a class in React which uses an input field which is part of the website header:
If the input is invalid then I want to display a snackbar. I'm using Material-UI components.
The problem is I defined anchorOrigin to be center and top as per Material-UI API. However the snackbar takes up the whole screen width while I want it to only take up the top center location of the screen. My message is quite short, for example "Value invalid" but if it's longer then I should be able to use newlines. I'm not sure if there's some setting in Material-UI API to alter this (I couldn't find one) or I need to use CSS.
This is my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarMessage from './SnackbarMessage.js';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class Test extends Component {
state = {
appId: '',
snackBarOpen: false
}
render() {
return (
<div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
value={'test'} />
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<SnackbarMessage
variant="warning"
message={"test message"}
/>
</Snackbar>
</div>
)
}
}
css reactjs
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
I have a class in React which uses an input field which is part of the website header:
If the input is invalid then I want to display a snackbar. I'm using Material-UI components.
The problem is I defined anchorOrigin to be center and top as per Material-UI API. However the snackbar takes up the whole screen width while I want it to only take up the top center location of the screen. My message is quite short, for example "Value invalid" but if it's longer then I should be able to use newlines. I'm not sure if there's some setting in Material-UI API to alter this (I couldn't find one) or I need to use CSS.
This is my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarMessage from './SnackbarMessage.js';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class Test extends Component {
state = {
appId: '',
snackBarOpen: false
}
render() {
return (
<div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
value={'test'} />
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<SnackbarMessage
variant="warning"
message={"test message"}
/>
</Snackbar>
</div>
)
}
}
css reactjs
css reactjs
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
edited Nov 22 '18 at 5:34
hitchhiker
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
asked Nov 21 '18 at 21:31
hitchhikerhitchhiker
728
728
1
I don't see import statements forSnackbarandSnackbarMessage... How is the above code even running? Also, in the material-ui examples forSnackbarit does not take the entire screen width. Try to inspect the element and see where the 100% width is coming from.
– o4ohel
Nov 22 '18 at 5:06
@o4ohel I found from Chrome's inspect tool thatSnackbarMessagehas the following CSS:@media (max-width: 959.95px) <style>…</style> .MuiSnackbarContent-root-169 { flex-grow: 1; }. When I disableflex-growthe snackbar doesn't take up the whole width. I tried adding style toSnackbarMessageto manually setflex-growto 0 but this doesn't work.
– hitchhiker
Nov 22 '18 at 6:20
add a comment |
1
I don't see import statements forSnackbarandSnackbarMessage... How is the above code even running? Also, in the material-ui examples forSnackbarit does not take the entire screen width. Try to inspect the element and see where the 100% width is coming from.
– o4ohel
Nov 22 '18 at 5:06
@o4ohel I found from Chrome's inspect tool thatSnackbarMessagehas the following CSS:@media (max-width: 959.95px) <style>…</style> .MuiSnackbarContent-root-169 { flex-grow: 1; }. When I disableflex-growthe snackbar doesn't take up the whole width. I tried adding style toSnackbarMessageto manually setflex-growto 0 but this doesn't work.
– hitchhiker
Nov 22 '18 at 6:20
1
1
I don't see import statements for
Snackbar and SnackbarMessage ... How is the above code even running? Also, in the material-ui examples for Snackbar it does not take the entire screen width. Try to inspect the element and see where the 100% width is coming from.– o4ohel
Nov 22 '18 at 5:06
I don't see import statements for
Snackbar and SnackbarMessage ... How is the above code even running? Also, in the material-ui examples for Snackbar it does not take the entire screen width. Try to inspect the element and see where the 100% width is coming from.– o4ohel
Nov 22 '18 at 5:06
@o4ohel I found from Chrome's inspect tool that
SnackbarMessage has the following CSS: @media (max-width: 959.95px) <style>…</style> .MuiSnackbarContent-root-169 { flex-grow: 1; }. When I disable flex-grow the snackbar doesn't take up the whole width. I tried adding style to SnackbarMessage to manually set flex-grow to 0 but this doesn't work.– hitchhiker
Nov 22 '18 at 6:20
@o4ohel I found from Chrome's inspect tool that
SnackbarMessage has the following CSS: @media (max-width: 959.95px) <style>…</style> .MuiSnackbarContent-root-169 { flex-grow: 1; }. When I disable flex-grow the snackbar doesn't take up the whole width. I tried adding style to SnackbarMessage to manually set flex-grow to 0 but this doesn't work.– hitchhiker
Nov 22 '18 at 6:20
add a comment |
2 Answers
2
active
oldest
votes
I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.
<Snakbar
className = "my-snakbar"
{/*All your other stuff*/}
>
{//Stuff}
</Snakbar>
CSS
.my-snakbar {
width: 200px;
//Maybe use flexbox for positioning then
}
Let me know your thoughts
Daniel
Improved Answer
Code copied from origional question and modified
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '@material-ui/core/Snackbar';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class ComingSoon extends Component {
render() {
const styles = {
container: {
position: "fixed",
top: "0px",
width: "100%",
height: "30px"
},
snakbar: {
background: "black",
color: "white",
width: "100px",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
margin: "0 auto"
}
};
return (
<div className = "snakbar-container" style = {styles.container}>
<Snackbar
className = "my-snakbar"
style = {styles.snakbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<span>My Message</span>
</Snackbar>
</div>
)
}
}
export default ComingSoon;
Screen shot
enter image description here
Let me know if this helped
Daniel
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
add a comment |
Material-UI set Snackbars to full viewport-width below the breakpoint "md" (600px).
You can use overrides (https://material-ui.com/customization/overrides/) and set new values to the default CSS classes of the component described in the components API (i.e. https://material-ui.com/api/snackbar/). So you can override the class anchorOriginTopCenter as follows:
const styles = theme => ({
anchorOriginTopCenter: {
[theme.breakpoints.down('md')]: {
top: "your value/function here",
justifyContent: 'center',
},
},
root: {
[theme.breakpoints.down('md')]: {
borderRadius: 4,
minWidth: "your value / function here",
},
},
});
The first objects overrides the default class {anchorOriginTopCenter}, the second 'root' is applied to first element in your snackbar (probably a 'div').
answered Jan 26 at 17:59
BjörnBjörn
1
add a comment |
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%2f53420736%2fhow-to-make-material-ui-snackbar-not-take-up-the-whole-screen-width-using-anchor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.
<Snakbar
className = "my-snakbar"
{/*All your other stuff*/}
>
{//Stuff}
</Snakbar>
CSS
.my-snakbar {
width: 200px;
//Maybe use flexbox for positioning then
}
Let me know your thoughts
Daniel
Improved Answer
Code copied from origional question and modified
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '@material-ui/core/Snackbar';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class ComingSoon extends Component {
render() {
const styles = {
container: {
position: "fixed",
top: "0px",
width: "100%",
height: "30px"
},
snakbar: {
background: "black",
color: "white",
width: "100px",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
margin: "0 auto"
}
};
return (
<div className = "snakbar-container" style = {styles.container}>
<Snackbar
className = "my-snakbar"
style = {styles.snakbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<span>My Message</span>
</Snackbar>
</div>
)
}
}
export default ComingSoon;
Screen shot
enter image description here
Let me know if this helped
Daniel
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
add a comment |
I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.
<Snakbar
className = "my-snakbar"
{/*All your other stuff*/}
>
{//Stuff}
</Snakbar>
CSS
.my-snakbar {
width: 200px;
//Maybe use flexbox for positioning then
}
Let me know your thoughts
Daniel
Improved Answer
Code copied from origional question and modified
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '@material-ui/core/Snackbar';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class ComingSoon extends Component {
render() {
const styles = {
container: {
position: "fixed",
top: "0px",
width: "100%",
height: "30px"
},
snakbar: {
background: "black",
color: "white",
width: "100px",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
margin: "0 auto"
}
};
return (
<div className = "snakbar-container" style = {styles.container}>
<Snackbar
className = "my-snakbar"
style = {styles.snakbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<span>My Message</span>
</Snackbar>
</div>
)
}
}
export default ComingSoon;
Screen shot
enter image description here
Let me know if this helped
Daniel
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
add a comment |
I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.
<Snakbar
className = "my-snakbar"
{/*All your other stuff*/}
>
{//Stuff}
</Snakbar>
CSS
.my-snakbar {
width: 200px;
//Maybe use flexbox for positioning then
}
Let me know your thoughts
Daniel
Improved Answer
Code copied from origional question and modified
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '@material-ui/core/Snackbar';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class ComingSoon extends Component {
render() {
const styles = {
container: {
position: "fixed",
top: "0px",
width: "100%",
height: "30px"
},
snakbar: {
background: "black",
color: "white",
width: "100px",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
margin: "0 auto"
}
};
return (
<div className = "snakbar-container" style = {styles.container}>
<Snackbar
className = "my-snakbar"
style = {styles.snakbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<span>My Message</span>
</Snackbar>
</div>
)
}
}
export default ComingSoon;
Screen shot
enter image description here
Let me know if this helped
Daniel
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.
<Snakbar
className = "my-snakbar"
{/*All your other stuff*/}
>
{//Stuff}
</Snakbar>
CSS
.my-snakbar {
width: 200px;
//Maybe use flexbox for positioning then
}
Let me know your thoughts
Daniel
Improved Answer
Code copied from origional question and modified
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '@material-ui/core/Snackbar';
const classes = theme => ({
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class ComingSoon extends Component {
render() {
const styles = {
container: {
position: "fixed",
top: "0px",
width: "100%",
height: "30px"
},
snakbar: {
background: "black",
color: "white",
width: "100px",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
margin: "0 auto"
}
};
return (
<div className = "snakbar-container" style = {styles.container}>
<Snackbar
className = "my-snakbar"
style = {styles.snakbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<span>My Message</span>
</Snackbar>
</div>
)
}
}
export default ComingSoon;
Screen shot
enter image description here
Let me know if this helped
Daniel
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
edited Nov 24 '18 at 12:25
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
answered Nov 21 '18 at 22:11
GaddMasterGaddMaster
11
11
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
add a comment |
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
This didn't help.
– hitchhiker
Nov 22 '18 at 6:17
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
I amended answer and made it work. Screenshot demonstrates. Also in the comments above, it mentions that the demos on the material UI site show how style is handled.
– GaddMaster
Nov 22 '18 at 20:21
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
Your second suggestion didn't work either, moreover even in the image your provided you can see that it didn't work (the message is in the left top corner while in the OP it says "I defined anchorOrigin to be center and top").
– hitchhiker
Nov 23 '18 at 7:42
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
I see. that's an easy fix. Ill amend right now on fly
– GaddMaster
Nov 24 '18 at 12:19
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
That should do it. I imagine there is a more professional way through. But that CSS will do it
– GaddMaster
Nov 24 '18 at 12:26
add a comment |
Material-UI set Snackbars to full viewport-width below the breakpoint "md" (600px).
You can use overrides (https://material-ui.com/customization/overrides/) and set new values to the default CSS classes of the component described in the components API (i.e. https://material-ui.com/api/snackbar/). So you can override the class anchorOriginTopCenter as follows:
const styles = theme => ({
anchorOriginTopCenter: {
[theme.breakpoints.down('md')]: {
top: "your value/function here",
justifyContent: 'center',
},
},
root: {
[theme.breakpoints.down('md')]: {
borderRadius: 4,
minWidth: "your value / function here",
},
},
});
The first objects overrides the default class {anchorOriginTopCenter}, the second 'root' is applied to first element in your snackbar (probably a 'div').
answered Jan 26 at 17:59
BjörnBjörn
1
add a comment |
Material-UI set Snackbars to full viewport-width below the breakpoint "md" (600px).
You can use overrides (https://material-ui.com/customization/overrides/) and set new values to the default CSS classes of the component described in the components API (i.e. https://material-ui.com/api/snackbar/). So you can override the class anchorOriginTopCenter as follows:
const styles = theme => ({
anchorOriginTopCenter: {
[theme.breakpoints.down('md')]: {
top: "your value/function here",
justifyContent: 'center',
},
},
root: {
[theme.breakpoints.down('md')]: {
borderRadius: 4,
minWidth: "your value / function here",
},
},
});
The first objects overrides the default class {anchorOriginTopCenter}, the second 'root' is applied to first element in your snackbar (probably a 'div').
answered Jan 26 at 17:59
BjörnBjörn
1
add a comment |
Material-UI set Snackbars to full viewport-width below the breakpoint "md" (600px).
You can use overrides (https://material-ui.com/customization/overrides/) and set new values to the default CSS classes of the component described in the components API (i.e. https://material-ui.com/api/snackbar/). So you can override the class anchorOriginTopCenter as follows:
const styles = theme => ({
anchorOriginTopCenter: {
[theme.breakpoints.down('md')]: {
top: "your value/function here",
justifyContent: 'center',
},
},
root: {
[theme.breakpoints.down('md')]: {
borderRadius: 4,
minWidth: "your value / function here",
},
},
});
The first objects overrides the default class {anchorOriginTopCenter}, the second 'root' is applied to first element in your snackbar (probably a 'div').
answered Jan 26 at 17:59
BjörnBjörn
1
Material-UI set Snackbars to full viewport-width below the breakpoint "md" (600px).
You can use overrides (https://material-ui.com/customization/overrides/) and set new values to the default CSS classes of the component described in the components API (i.e. https://material-ui.com/api/snackbar/). So you can override the class anchorOriginTopCenter as follows:
const styles = theme => ({
anchorOriginTopCenter: {
[theme.breakpoints.down('md')]: {
top: "your value/function here",
justifyContent: 'center',
},
},
root: {
[theme.breakpoints.down('md')]: {
borderRadius: 4,
minWidth: "your value / function here",
},
},
});
The first objects overrides the default class {anchorOriginTopCenter}, the second 'root' is applied to first element in your snackbar (probably a 'div').
answered Jan 26 at 17:59
BjörnBjörn
1
answered Jan 26 at 17:59
BjörnBjörn
1
answered Jan 26 at 17:59
BjörnBjörn
1
answered Jan 26 at 17:59
BjörnBjörn
1
1
add a comment |
add a comment |
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%2f53420736%2fhow-to-make-material-ui-snackbar-not-take-up-the-whole-screen-width-using-anchor%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
1
I don't see import statements for
SnackbarandSnackbarMessage... How is the above code even running? Also, in the material-ui examples forSnackbarit does not take the entire screen width. Try to inspect the element and see where the 100% width is coming from.– o4ohel
Nov 22 '18 at 5:06
@o4ohel I found from Chrome's inspect tool that
SnackbarMessagehas the following CSS:@media (max-width: 959.95px) <style>…</style> .MuiSnackbarContent-root-169 { flex-grow: 1; }. When I disableflex-growthe snackbar doesn't take up the whole width. I tried adding style toSnackbarMessageto manually setflex-growto 0 but this doesn't work.– hitchhiker
Nov 22 '18 at 6:20