Adding capture button to bottom centre of the capture window - javascript

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

Related

ReactJS CSS inline style position dynamically

I have this element in my React code:
{focusedAnnotationIconProps && (
<div
style={{
backgroundColor: "#333",
width: "100px",
position: "absolute",
left: focusedAnnotationIconProps.left,
top: focusedAnnotationIconProps.top + 25,
color: "#fff",
}}
>
{annotationIconPopoverText}
</div>
)}
this is a popover that will show when hovering over an icon, so I get the CSS left/top position numbers from that Icon (in another part of the code), and place it there, and currently, is showing like this:
I need to center this popover in the middle of the icon
but the thing is, this <div> element has variable width, depending on the text inside
so I was thinking of someway to do something like this:
left: focusedAnnotationIconProps.left - this.width/2
but I know that won't work.. I tried using the calc css3 function, but won't work inline with CSS, so there's my problem.. would appreciate any help
With position: absolute, you can use these methods to center the elements:
Center Vertically:
style={{
top: "50%",
transform: "translateY(-50%)"
}}
Center Horizontally:
style={{
left: "50%",
transform: "translateX(-50%)"
}}
Center to the parent div:
style={{
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
}}

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;
}

How can I put content over my canvas in React

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

Button wtih absolute position inside KeyboardAvoidingView "overwriting" other elements

I have a button with absolute position, used for a form. When inside a KeyboardAvoidingView it goes on top of the other elements
const BtnContainer = styled.View`
position: absolute;
bottom: 38px;
left: 16px;
width: ${Dimensions.get('window').width - 32};
`
<KeyboardAvoidingView
behavior="padding"
enabled
style={{ flex: 1 }}
keyboardVerticalOffset={60}
>
// form content
<BtnContainer>
<Button
text={getButtonLabel()}
disabled={!isButtonEnabled()}
onPress={stepChangeCallBack}
/>
</BtnContainer>
</KeyboardAvoidingView>
I tried behavior="position" and it breaks all the layout and behavior="height" also doesn't work.

How to vertically and horizontally center a component in react?

How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?
render() {
return (<ComponentASD
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}} />);
}
Another option is to use flex-box.
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world
</div>
Your example code works well:
ReactDOM.render(
<div
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
Hello, world!
</div>,
document.getElementById('root')
);
https://codepen.io/anon/pen/JaLLmX
It has to do something with your layout.
Thanks for the testing+comments! The styling ended up being fine, the issue was somehow caused by the layout of ComponentASD, which is actually MUI's CircularProgress https://material-ui.com/api/circular-progress/#demos
I wrapped that component in a div inside of render and applied the styling to the div, which fixed the problem (keeps it stationary and properly aligned).
This is flexbox you will need to use this on the parent Component.
.Parent {
display: flex,
flexFlow: row nowrap,
justifyContent: center,
alignItems: center,
{
It will center the children vertically and horizontally
You can also align each component as I've shown you below
render() {
return (<Childcomponent
style={{
display: flex,
flexFlow: row nowrap,
justifySelf: center,
alignSelf: center,
}} />);
}
If you want to have a properly scrollable list if the window's height is smaller than the content's height you want to center, you can do this (based on this CSS answer):
<div
style={{
display: "table",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0
}}
>
<div
style={{
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}}
>
// Here comes the content you want to center
</div>
</div>
If you want to use it in a component just call it in the component:
.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}
Your jsx file sould have something like just to call it, using "className":
<div className="Login"><div>

Categories