How can I put content over my canvas in React - javascript

This is my code for my canvas and my Navbar and it looks like this:
<DashboardNavbar style={{ zIndex: 2 }} />
<canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}
></canvas>
The problem is I want to achieve something like this:
<canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}>
<DashboardNavbar style={{ zIndex: 2 }} />
</canvas>
I want that I can display my canvas behaves like the background of the website so I can display content over it in this case it is my navbar but I plan to display more stuff below the navbar and the canvas as my background.
What I have tried:
Using zIndexes to put my canvas one below my navbar but this did not work
Tried using position absolute and relative on canvas but did not work either

You can use a "layout div" as a background for all the elements you will put over the canvas, just after the canvas, and both the canvas and the layout div should have position absolute and need to be inside another div:
JS
const DashboardNavbar = () => (
<div className="navbar">Hello</div>
)
const HelloWorld = () => (
<div className="main">
<canvas id="canvas" style={{ background: "#232323", width: "100%", height:100}} />
<div className="layout">
<DashboardNavbar />
</div>
</div>
)
ReactDOM.render(<HelloWorld />, document.getElementById('app'))
CSS
.layout{
position:absolute;
width:100%;
height:100px;
}
#canvas{
position: absolute;
}
.navbar{
color: white;
background-color: blue;
padding:2px;
margin:20px;
}
HTML
<div id="app"></div>
Codepen working example

Related

Make CardMedia Images fit its content in MUI 5

I want my images to fully fit the CardMedia. Yet since they are of different heights and widths, some of them get cut like so:
Also upon resizing, some images get cut as well:
This is the code for the CardMedia part:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={product.img_urls[0]}
alt={product.name}
title={product.name}
sx={{ padding: "1em 1em 0 1em" }}
/>
// Other Content
</Card>
Overall, I want to achieve something like this but with all the cards in the same height and width:
Is there any way I can fix this or do I need to resize each image individually?
You need to make your pictures to fill their layouts, AND keep their aspect ratio.
The best way is to set their "object-fit" css property to "contain".
Try this:
<Card
raised
sx={{
maxWidth: 280,
margin: "0 auto",
padding: "0.1em",
}}
>
<CardMedia
component="img"
height="250"
image={imageNetwork}
alt={"alt"}
title={"titleasdasdsada"}
sx={{ padding: "1em 1em 0 1em", objectFit: "contain" }}
/>
// Other Content
</Card>
Try this
parent-image-element {
width: 100px;
}
image {
width: 100%;
max-height: 100px;
}

Not able to align divs' inside a parent div in react

Here is the picture. I want to align the div's (with blue border) from top. I just want the CSS code for this. I tried to use margin but its not working. Also when more content is inserted inside these div's they expand from bottom to top, seems like bottom for these div's is fixed or something.
what I want is that the Inner div's (with blue border) should be top aligned not bottom aligned and when more text is added inside these div's it should expand from top top to bottom.
here is the CSS code. propertiesContainer class is the parent div with red border and properties class are the inner div's
propertiesContainer: {
paddingTop: "26px",
background: " #EAEAFA",
border: "1px solid red",
opacity: 1,
},
properties: {
bottom: "100px",
margin: "19px",
width: "auto",
border: "2px solid blue",
height: "262px",
},
Reactjs code for this
<section className={classes.propertiesContainer}>
<HorizontalScroll
itemClass="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
data={
mobile_footer_data &&
mobile_footer_data.map((data, index) => {
const { header, body } = data;
console.log("dataa", data);
const text = body.map((item, index) => {
return <div key={index}>{item}</div>;
});
return (
<div key={index} className={classes.properties}>
<CommonHeaderText
text={<span>{header}</span>}
variant="h1"
style={{
fontSize: "16px",
fontWeight: "bold",
fontFamily: "Open Sans",
color: "##363636",
height: "19px",
marginBottom: "25px",
}}
/>
<div>{text}</div>
</div>
);
})
}
/>
</section>;
For inline element, The default value of vertical-align is baseline. So, they are text baseline aligned. Trying applying this to the child div:
vertical-align: top;
.outter {
outline: 2px dashed #387779;
padding: 10px;
}
.inner {
width: 100px;
height: 80px;
display: inline-block;
background-color: #a3af92;
color: #26310a;
}
.vtop {
vertical-align: top;
}
<div class="outter">
<div class="inner">hello<br/>world<br/>abc</div>
<div class="inner">abcd<br/>two</div>
<div class="inner">123</div>
</div>
<br/>
<div class="outter">
<div class="inner vtop">hello<br/>world<br/>abc</div>
<div class="inner vtop">abcd<br/>two</div>
<div class="inner">123</div>
</div>
suppose your parent div has className "parent"
and it has two children "child1" and "child2"
so the css will look like this
.parent{
display:flex;
justify-content:space-between;
align-items:flex-start;
}
Trying applying this to the parent div , hope this solves your issue .

Adding capture button to bottom centre of the capture window

I'm using the react-webcam npm library and currently, the "capture image" button is located at the bottom of the screen as shown here.
Capture button default position
What I want to do is to get that button to the bottom center of the capture window as I've shown here.
Area the capture button needs to be added
This is my camera and button
<Webcam
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
style={{ height: 600, width: "100%" }}
/>
<button
onClick={capture}
style={{marginTop: "-200px"}}
>
Capture photo
</button>
I've tried giving marginTop and marginBottom but couldn't get it done. Any idea how I can fix this?
You need a container that can wrap the button to give it a position absolute:
//style.css
.video-container {
position: relative;
}
.button {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, 0%);
}
//your jsx
<div
className="video-container"
style={{ height: '600px', width: "100%" }}
>
<Webcam
autoPlay
style={{ height: '100%', width: "100%" }}
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
/>
<button className="button" onClick={capture} >Capture photo</button>
</div>
Demo: https://codesandbox.io/s/strange-ardinghelli-mss9c?file=/src/index.js:0-42

Next JS image centering while screen size increases

I've been having a tough time working with NextJS's Image component.
I want to setup a banner image. This image must only cover a certain amount of space on the screen at any time, regardless of screen size. I've gotten this to mostly work with the combination of max-height: 30vh and overflow: hidden. However, I can't seem to get the image to center while the screen size changes. It should vary from seeing the entire image to focusing on the bed. Instead, its focusing on the pic's ceiling.
Live sample: https://codesandbox.io/s/nextjs-image-layout-lc7vb?file=/src/pages/index.tsx
const Index = (props: IBlogGalleryProps) => (
<Main
...
>
<div className="w-full overflow-hidden" style={{ maxHeight: '30vh' }}>
<Image width="300" height="200" layout="responsive" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
</div>
...
</Main>
);
If you want to align the image according to your needs, you should use layout="fill" with eg. objectFit="cover".
next/image API Reference
When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit.
For this to work, the container needs a height and position: relative.
You can also set objectPosition if you don't want the CSS's default object-position: 50% 50%.
This should do the trick:
const Index = (props: IBlogGalleryProps) => (
<Main
...
>
<div className="w-full overflow-hidden relative" style={{ height: '30vh' }}>
<Image layout="fill" objectFit="cover" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
</div>
...
</Main>
);
Here is an working example: https://codesandbox.io/s/nextjs-image-layout-forked-82op5?file=/src/pages/index.tsx
#El Devoper's answer is the correct approach, but for version 13+ the objectFit and layout props have been removed. Instead you need to use the style prop.
Version 13+
<Image fill style={{ objectFit: "cover" }} />
<div
style="
height: 30vh;
width: 100%;
max-width: 800px;
position: relative;
background-image: url('/imagelink/image.jpg');
background-position: center center;
background-size: cover;
">
</div>
you could use a div and set to it a background.
What you call fixing on the bed are done with the background-position tag.
But you can also use object-fit and object-position for the <img/> tag.
like this:
object-fit: cover;
object-position: center;
this will make you image always 100% width and height of the <img/> box size and also center it.

How to fix the default height for the collapse body in Ant design

I created right side collapsible panel. I need to change the panel height (max 100px) after the collapse
My css is like this
background: '#f7f7f7', borderRadius: 5, width: 200, marginBottom: 0, border: 50, overflow: 'hidden',
and Rekit code like this
render() {
return (
<div className="common-coll-bar">
<Collapse bordered defaultActiveKey={['1']} onChange={callback}>
<Panel header="This is panel header 1" key="1" style={customPanelStyle}>
<p>{text}</p>
</Panel>
</Collapse>
</div>
);
}
can you help me?
!do not use height it will ruin the layout!
Just use line-height
.ant-collapse-header {
line-height: 100px;
}

Categories