I'm having trouble with a button overlapping my header title in the mobile view (looks fine in computer view). I'm trying to find a way for the button and the header title to both fit in the header, possibly by resizing according to changing width? if that's possible.
Here is the CSS for my header:
header: {
background: '#C4C4C4',
height: '100px',
textAlign: 'center',
boxShadow: '0px 2px 2px #A9A9A9',
fontFamily: 'PT Sans Caption',
fontSize: '36px',
marginBottom: '20px',
paddingTop: '20px',
textTransform: 'uppercase',
position: 'fixed',
top: 0,
width: '100%',
},
homeButton: {
boxShadow: '0px 2px 2px #A9A9A9',
fontFamily: 'PT Sans Caption',
fontSize: '20px',
display: 'block',
position: 'absolute',
marginLeft: '10px',
},
Here is a screenshot of computer view:
Here is a screenshot of mobile view:
Basically I want the 'Add Movement' title to not be hidden by the home button. Any help would be appreciated!
You could try using Flexbox and a media query
header {
display: flex;
#media (max-width: [whatever you choose]px) {
flex-wrap: wrap;
}
}
Related
I am trying to design a simple report with the format as shown in the following Figma file using React and Material UI. However, I am encountering a challenge when designing the slanting edges of the divs as shown on the report. Plus the purple border. This is what I have done so far, but it is far from being perfect:
const leftDiv = {
content: "",
position: "absolute",
top: "50%",
right: 0,
width: "100%",
height: "50%",
backgroundColor: 'rgb(255, 255, 255)',
clipPath: "polygon(0 0, 0% 0%, 100% 100%, 0% 100%)"
}
const rightDiv = {
position: "absolute",
bottom: 0,
right: 0,
display: 'inline-block',
width: 0,
height: 0,
borderStyle: 'solid',
borderWidth: '0 0 500px 100vw',
borderColor: 'transparent transparent #FFFFFF transparent',
}
const contentDiv = {
backgroundColor: 'rgb(255, 255, 255)',
width: "100%",
height: "100%",
clipPath: "polygon(100% 0, 100% 0%, 100% 100%, 0% 100%)"
}
const Coverpage = () => {
return (
<Container>
<Grid>
<Paper>
<Box sx={{ position: 'relative', width: '100%' }}>
<CardMedia
component='img'
alt="cover page image"
image='https://unsplash.com/photos/vbxyFxlgpjM'
/>
<Box style={leftDiv}></Box>
<Box style={rightDiv}>
<Box style={contentDiv}>
<Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end', textAlign: 'right', pr: 8 }}>
<Typography sx={{ fontSize: '24px', mb: 2 }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '48px', fontWeight: 'bold', textTransform: 'uppercase', color: '#000133' }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '64px', fontWeight: 'bold', textTransform: 'uppercase', color: 'blue' }}>Lorem ipsum</Typography>
</Box>
</Box>
</Box>
</Box>
</Paper>
</Grid>
</Container>
);
}
export default Coverpage;
I found using clipPath as the easiest, even though I would prefer using triangles to design the slanting edges since later, I am planning to use react-pdf-renderer which I am not sure if it supports clipPath in its CSS styling.
I will appreciate a pointer to the right direction.
Dan touched on the purple border. About the slanted div you can use this trick:
.slanted{
height: 0;
width: 0;
border-top: solid 100px transparent;
border-right: solid 50vw blue;
border-left: solid 50vw blue;
border-bottom: solid 100px blue;
}
You're making a div with no height or width. The borders meet along a diagonal line and so you can have a triangle effect.
You can use an additional div for the text
Edit: making the borders responsive
To make the border trick dynamic you can use some JS:
function App() {
const footerRef = React.useRef()
useEffect(() => {
window.addEventListener('resize', setBorders)
return () => {
window.removeEventListener('resize', setBorders)
}
}, [])
useEffect(() => {
if (!footerRef.current) return
setBorders()
}, [footerRef])
const setBorders = () => {
let containerWidth = document.querySelector('.container').clientWidth
let footerStyle = footerRef.current.style
footerStyle.borderRightWidth = containerWidth/2+'px'
footerStyle.borderLeftWidth = containerWidth/2+'px'
}
return (
<div className='App'>
<div className='container'>
<div className='footer' ref={footerRef}>
</div>
</div>
</div>
);
}
export default App
We are adding a 'resize' eventListener to the window that will trigger the setBorders() function. In this function we select the container element and set the width of the footer borders to be half of it.
To make sure the function also fires on initial load I added a useEffect which will fire when the footer is created and its Ref is set. You can also use a callback ref instead.
The css, I assumed the footer will be static height:
.container{
height: 200px;
width: 100%;
background: red;
}
.footer{
position: relative;
height: 0;
width: 0;
top: calc(100% - 100px);
/*border-top width + border-bottom width = 100px*/
border-top: 50px solid transparent;
border-bottom: 50px solid green;
border-right: solid blue;
border-left: solid blue;
}
If you don't mind making the container position: relative; you can then just do:
.footer{
position: absolute;
bottom: 0;
}
You just need to use a simple CSS transform on the element.
transform: skew(-15deg, -15deg);
The strike through is not vertically centered.
My code is like this:
<Text style={{textDecorationLine: 'line-through', alignSelf: 'center', fontFamily: constants.FONTBOLD, color: constants.ORANGE, fontSize: 16}}>
well, we couldn't actually find a solution with the textDecoration property. But we did a work-around by placing absolutely a View. Like this (pseudo code)
const styles = StyleSheet.create({
parent: {
position: relative,
},
halfLine: {
width: "100%",
top: 0,
height: "35%",
borderBottomColor: "black",
borderBottomWidth: 1,
position: "absolute",
},
<View class={styles.parent}>
<View class={styles.halfLine} />
<Copy> $100 </Copy>
</View>```
I am struggling to get the material-ui app bar example to work as I would like to. Codesandbox (from Material-UI website).
What I Am Trying To Achieve:
What I am trying to achieve is to get the search field to grow all the way to the right (effectively taking the majority of the app bar no matter what screen size).
What I Have Tried:
I have tried using flexGrow: 1 as follows which only grows the search bar slightly (not till the end):
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
width: 'auto',
flexGrow:1
},}
I have also tried setting width: '100%' instead of 'width: auto' but that makes the Material-UI logo disappear.
Image of desired result:
Remove the width: 'auto' from your current code,
Add minWidth with title
title: {
display: 'none',
minWidth: '120px', // Add
[theme.breakpoints.up('sm')]: {
display: 'block',
},
},
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%', // Keep
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(3),
// width: 'auto', // Remove
},
},
I’m having trouble aligning two components within another div in React. I’m using relative positioning for the parent div (snippetButtonHolder) and absolute positioning for its children (snippet and button). I want snippet to be centered in the parent and button to be under snippet and to the right, but for some reason when I use these attributes they are positioned relative to the entire page, not to the parent div. Does anyone have a suggestion as to what I should do differently?
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
margin: '0 auto',
padding: '10px',
width: '100%',
position: 'absolute',
left: '50%',
},
snippetButtonHolder: {
width: '95%',
position: 'relative',
},
button: {
float: 'right',
marginTop: '5px',
position: 'absolute',
left: '94%',
},
};
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={styles.module}>
<div style={styles.snippetButtonHolder}>
<div style={styles.snippet}>
<div
{'text will go here'}
</div>
{this.state.showButton ?
<button
style={styles.button}>
Press me
</button>
: null}
</div>
</div>
</div>
);
}
}
Give this a try:
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
display: 'inline-block',
overflow: 'hidden',
padding: '10px',
},
snippetButtonHolder: {
textAlign: 'center',
width: '95%',
},
button: {
float: 'right',
marginTop: '5px',
},
};
Hi guys this Queryloader is working on my page but what i want now is to put image inside the loader(ex. company logo). Please help
<script src="loader/queryloader2.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {
barColor: "#e7c665",
backgroundColor: "#111",
percentage: true,
barHeight: 1,
minimumTime: 300,
fadeOutTime: 1000
});
});
</script>
http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/
The plugin loads preloads all the images in the HTML. There is no provision to load only a subset of images. At least none as far as the documentation goes.
It automatically fetches all your images and background images and preloads them before showing the webpage
-from the QueryLoader2 site
All you need to do is add some CSS code...
If you want to add custom text:
#qLoverlay::after {
position:absolute;
content:'your custom text here';
left:0;
right:0;
bottom:40%;
font-size:14px;
color:#FFF;
}
If you want to add an image:
#qLoverlay::before {
position:absolute;
content:url(exampleimage.png);
left:0;
right:0;
top:30%;
}
You can just use the following CSS rule:
#qLoverlay {
background: url(images/logo.png) no-repeat center 25%;
}
Modify the css this way:
#qLoverlay{
position: relative;
}
Only change the top for adjust the image.
#qLoverlay::before {
position:absolute;
content:url('images/logoedit1.png');
text-align: center;
top: 25%;
width: 100%;
}
I added the following where it creates the loading text, bar, and percentage
// CODE TO INSERT
this.loaderLogo = $("<div id='loader-logo'></div>").css({
background: 'url("http://chrisrocco.net/elegantearth/res/images/logo.png") no-repeat',
backgroundSize: '100%',
height: "400px",
width: "900px",
margin: "25px auto",
fontSize: "60px",
textAlign: "center",
color: this.parent.options.barColor
}).appendTo(this.container);
It belongs here, on line ~31 of queryloader2.js
if (this.parent.options.percentage == true) {
this.percentageContainer = $("<span id='qLpercentage'></span>").text("0%").css({
height: "80px",
width: "115px",
position: "absolute",
fontSize: "60px",
fontFamily: this.parent.options.fontFamily,
top: "75%",
left: "50%",
marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
textAlign: "center",
marginLeft: "12px",
marginTop: "-120px",
color: this.parent.options.barColor
}).appendTo(this.container);
this.nameElem = $("<span id='elem-title'></span>").text("Loading ").css({
height: "80px",
width: "258px",
position: "absolute",
fontSize: "60px",
fontFamily: this.parent.options.fontFamily,
top: "75%",
left: "50%",
marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
textAlign: "center",
marginLeft: "-270px",
marginTop: "-120px",
color: this.parent.options.barColor
}).appendTo(this.container);
// LINE 31
// INSERT HERE
}
You will, of course, have to tweak the css to your project
Picture of Result