I'm working on an image upload component, and the design breaks when I put iphone 5 / se
But my css are breaking out, I want to force the design to respect the limits, iphone 6 and others are good, but when I change to the iphone 5, well, the print says everything.
This is the CSS code:
import { fontTitle, fontSizeInput, gradient, shadow, primaryColor, grayColor3, grayColor4 } from './theme'
export const
dropzone = {
display: 'grid',
margin: 'auto',
alignContent: 'center',
justifyItems: 'center',
gridRowGap: '15px',
border: `2px dashed ${grayColor3}`,
borderRadius: '6px',
color: primaryColor,
textAlign: 'center',
},
instructions = {
marginTop: '20px'
},
button = {
display: 'block', // necessary for link version
WebkitAppearance: 'none',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
MozAppearance: 'none',
outline: 'none',
cursor: 'pointer',
width: '90%',
padding: '10px 0px',
border: 'none',
borderRadius: '20px',
fontFamily: fontTitle,
fontSize: fontSizeInput,
color: '#FFF',
background: gradient,
boxShadow: `${shadow}`
},
btnDisabled = {
...button,
cursor: 'initial',
color: primaryColor,
background: 'none',
backgroundColor: grayColor4,
boxShadow: 'none'
},
input = {
opacity: 0
},
styleTag = `
.dropzone {
height: 100%;
height: -webkit-fill-available;
height: -moz-available;
}
`
This is the print of how it looks:
Related
I am trying to align the items in a div (that is within an MUI Select styled component):
const SelectStyle = styled(Select)(({ theme }) => ({
width: WIDTH,
border: `1px solid ${theme.palette.grey[400]}`,
borderRadius: 3,
fontSize: '1.2rem',
'&:hover': {
backgroundColor: theme.palette.grey[300],
border: `1px solid ${theme.palette.grey[500]}`,
},
'&:focus': {
backgroundColor: theme.palette.grey[700],
border: `1px solid ${theme.palette.grey[700]}`,
},
'& .MuiSelect-select': {
paddingTop: 5,
paddingBottom: 5,
fontSize: '1.2rem',
alignItems: 'center',
display: 'inline-flex'
},
}));
I can see that the effect has been applied to the parent div:
However, I still see that the text and the icon don't look center aligned ("Text" looks higher than the icon):
Is there a reason for this? And how do I make it more center aligned?
i am having a problem getting the styling right on a couple of buttons in JS, it seems when i add a styling class via className that on first render the formatting works, but on subsequent refreshes it loses its styling. It is only happening on the two individual buttons i have. After troubleshooting for ages, i have found that everything works when i use SX instead of classNames, so if i do this then the refresh works. So in code below one button styles and remains styles, but the second one, refreshing my button class does not? Stumped at this point, i ran through forums and see a lot about NextJs needing some extra config in _document and _app to make it work, but i ran this in from the NextJs Material UI boiler plate from Git so dont think it could be that causing it.
Code:
import React from 'react'
import { AppBar, Toolbar, alpha } from "#mui/material";
import Button from '#mui/material/Button'
import ButtonBase from '#mui/material/ButtonBase';
import { styled } from '#mui/material/styles';
import Typography from '#mui/material/Typography';
import InputBase from '#mui/material/InputBase';
import SearchIcon from '#mui/icons-material/Search';
import AddIcon from '#mui/icons-material/Add';
import { makeStyles } from '#mui/styles'
const useStyles = makeStyles(theme => ({
button: {
...theme.typography.mainmenu,
borderRadius: "40px",
width: "230px",
height: "130px",
marginLeft: "30px",
alignItem: "center",
"&:hover": {
backgroundColor: theme.palette.secondary
},
[theme.breakpoints.down("sm")]: {
width: '100% !important', // Overrides inline-style
height: 100
},
},
}))
/*Image Button Styling Begins*/
const images = [
{
url: '/assets/breakfastMenu.jpg',
title: 'Breakfast',
width: '20%',
},
{
url: '/assets/steak.jpg',
title: 'Mains',
width: '20%',
},
{
url: '/assets/desserts.jpg',
title: 'Desserts',
width: '20%',
},
];
const Image = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
color: theme.palette.common.primary,
}));
const ImageButton = styled(ButtonBase)(({ theme }) => ({
position: 'relative',
height: 150,
[theme.breakpoints.down('sm')]: {
width: '100% !important', // Overrides inline-style
height: 100,
},
'&:hover, &.Mui-focusVisible': {
zIndex: 1,
'& .MuiImageBackdrop-root': {
opacity: 0.15,
},
'& .MuiImageMarked-root': {
opacity: 0,
},
'& .MuiTypography-root': {
border: '4px solid currentColor',
},
},
}));
const ImageSrc = styled('span')({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: 'cover',
backgroundPosition: 'center 40%',
});
const ImageBackdrop = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0.4,
transition: theme.transitions.create('opacity'),
}));
const ImageMarked = styled('span')(({ theme }) => ({
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: 'absolute',
bottom: -2,
left: 'calc(50% - 9px)',
transition: theme.transitions.create('opacity'),
}));
/*Image Button Styling Ends*/
const Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
}));
const SearchIconWrapper = styled('div')(({ theme }) => ({
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: 'inherit',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
}));
const Header = () => {
const classes = useStyles();
return (<React.Fragment>
<AppBar position="sticky" className={classes.appBar}>
<Toolbar disableGutters>
{images.map((image) => (
<ImageButton
focusRipple
key={image.title}
style={{
width: image.width,
}}
>
<ImageSrc style={{
backgroundImage: `url(${image.url})`
}} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
<Typography
component="span"
variant="subtitle1"
color="white"
fontWeight="bold"
sx={{
position: 'relative',
p: "7em",
pt: "2em",
pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
}}
>
{image.title}
<ImageMarked className="MuiImageMarked-root" />
</Typography>
</Image>
</ImageButton>
))}
<Button size="large" variant="contained" color="secondary"
startIcon={<AddIcon />}
sx={{
borderRadius: "40px", borderRadius: "40px",
width: "230px",
height: "130px",
marginLeft: "30px",
alignItem: "center",
}} >Add A recipe</Button>
<Button size="large" variant="contained" color="secondary" className={classes.button}>Meals for the Week</Button>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Search…"
inputProps={{ 'aria-label': 'search' }}
/>
</Search>
</Toolbar>
</AppBar>
</React.Fragment >
)
}
export default Header
Exactly, you need to add some configuration to the _document.tsx in order to make the styles work properly with the NextJS server side rendering feature. The reason behind this is that you need that some styles are injected in the DOM for you.
As you can see in the MUI docs, you can use the ServerStyleSheets to handle the server side rendering properly.
This is the code I have in my _document.tsx
import React from 'react';
import Document, { Html, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '#mui/styles';
export default class MyDocument extends Document {
render() {
return (
<Html>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
};
};
You can read more information about this in these Server rendering - MUI docs
const SearchBar = (text, onChange) => {
return (
<div>
<div style={{flexWrap: "wrap", background: 'red', border: "1px solid", borderRadius: 10}}>
<Search style={{background: 'blue', verticalAlign: 'bottom'}}/>
<input style={{background: 'blue', verticalAlign: 'bottom'}}
text={text} onChange={onChange}/>
</div>
</div>
);
};
export default SearchBar;
Here is my search bar code.
The result is
but, I want it to appear like this.
How can I get the result?
In your Search component make the width to be 100%.
<Search style={{background: 'blue', verticalAlign: 'bottom', width:'100%'}}/>
First import FaSearch then replace your code with below mentioned.
import { FaSearch } from "react-icons/fa";
const App =(text, onChange)=> {
return (
<>
<div style={styles.mainStyle}>
<Search />
<input style={styles.inputStyle} text={"text"} onChange={null} />
</div>
</>
);
}
const Search = () => <FaSearch style={styles.search} />;
const styles = {
mainStyle: {
display: "flex",
flexWrap: "wrap",
borderRadius: 10,
alignItems: "center",
border: "1px solid",
overflow: "hidden"
},
inputStyle: {
flex: 1,
border: "none",
height: 30
},
search: {
fontSize: 30,
padding: "0px 10px",
cursor: "pointer",
borderRight: '1px solid grey'
}
};
I have implemented the Markercluster with the following style in the Google Maps. Everything is fine, but the text of the marker cluster turns blue after fiddling with the map. I want the text to be white.
styles: [{
height: 53,
url: markerIcons.clusterM1,
width: 53,
textColor: "white",
textDecoration: "none"
},
{
height: 56,
url: markerIcons.clusterM2,
width: 56,
textColor: "white",
textDecoration: "none"
},
{
height: 66,
url: markerIcons.clusterM3,
width: 66,
textColor: "white",
textDecoration: "none"
},
{
height: 78,
url: markerIcons.clusterM4,
width: 78,
textColor: "white",
textDecoration: "none"
},
{
height: 90,
url: markerIcons.clusterM5,
width: 90,
textColor: "white",
textDecoration: "none"
}]
});
"screenshot of the map"
This is because the text it becoming hyperlink text, which makes the text to be underlined and blue.
Can you extend your css object to include hyperlink styling?
{
height: 78,
url: markerIcons.clusterM4,
width: 78,
textColor: "white",
textDecoration: "none",
a.register:link { color:#FFFFFF; text-decoration:none;},
a.register:visited { color: #FFFFFF; text-decoration:none;},
a.register:hover { color: #FFFFFF; text-decoration:underline; },
a.register:active { color: #FFFFFF; text-decoration:none; }
},
We have a segmented button just below each toolbar. We have styled this button properly. However setting the pressedCls is really difficult. I've tried several forms and ofcourse google. Hopefully somebody can help me out here.
When clicked, the button should have a background color of #007aFF and textcolor: #fff. That's it. How can i do that.
Our css app.css
//SegmentedButtons
.customSegmentedButtonPressedCls{
color: #fff;
background: #007aff !important;
}
.button_pressed.x-button-pressed{
color: #148DEA;
background:#148DEA !important;
}
The segmented button part in the App:
{
xtype: 'segmentedbutton',
ui: 'segment',
allowDepress: false,
width: '100%',
id: 'btnLabelSegmented',
pressedCls: 'button_pressed',
itemId: 'btnLabelSegmented',
items: [{
text: 'All',
id: 'btnOrderSegmentedAll',
itemId: 'btnOrderSegmentedAll',
style: {
'background-color': '#f8f8f8',
'color': '#007aff',
'border-right': '1px solid #007aff',
'border-left': '1px solid #007aff',
'border-top': '1px solid #007aff',
'border-bottom': '1px solid #007aff',
'font-size': '15px'
},
flex: 1,
pressed: true
}, {
text: 'Label 1',
style: {
'background-color': '#f8f8f8',
'color': '#007aff',
'border-right': '1px solid #007aff',
'border-top': '1px solid #007aff',
'border-bottom': '1px solid #007aff',
'font-size': '15px'
},
id: 'btnOrderSegmentedLabel1',
itemId: 'btnOrderSegmentedLabel1',
flex: 1
}, {
text: 'Label 2',
style: {
'background-color': '#f8f8f8',
'color': '#007aff',
'border-right': '1px solid #007aff',
'border-top': '1px solid #007aff',
'border-bottom': '1px solid #007aff',
'font-size': '15px'
},
id: 'btnLabelSegmentedLabel2',
itemId: 'btnLabelSegmentedLabel2',
flex: 1
}]
},
Try something like this:
change background image of different color.
.backCls.x-button-pressing{
background: url('../images/back_active.png') !important;
background-repeat: no-repeat;
background-size: 65px 65px;
height: 65px;
width: 65px;
}
Or concern with this related question
How to change change images when click button in sencha