We Keep Coding

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%)"
}}

React: Overlay on hover without outer container for element

I am developing no-code platform where you can drag and drop HTML elements.
2 things are required:
user can SELECT each element
user can style each element through right-side panel (width, length, font-size, ...)
In order for 1) I have used this solution:
Selector.js
export default Selector = ({children}) => {
const [isHovered, setIsHovered] = useState(false);
const mouseOverHandler = (ev) => {
ev.stopPropagation();
setIsHovered(true);
}
const mouseOutHandler = (ev) => {
ev.stopPropagation();
setIsHovered(false);
}
return (
<div className="container" onMouseOver={mouseOverHandler} onMouseOut={mouseOutHandler}>
{children}
{ isHovered && <div className="overlay"></div> }
</div>
);
}
Selector.css
.container {
position: relative; // For .overlay to be absolute
max-width: fit-content; // To fit children/content size
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(122, 122, 122, 0.2);
}
App.js
export default App = () => [
return (
<div className="workspace">
<Selector><Input style={{width: "100%"}} /></Selector>
<Selector><Block style={{width: "100px"}} /></Selector>
<Selector><Block style={{width: "100%"}} /></Selector>
</div>
);
}
THE PROBLEM is when I try to set width:100% on Block component, for example. I want Block to stretch full width in .workspace, but because Block is in Selector, it will have .container as parent so it will fill only that element, not .workspace. With this, I am unable to fulfill 2) requirement.
You can check it here on Fiddle: https://jsfiddle.net/49cmok2a/2/.
If you set width to 100px on Block it's gonna be block with 100px width, but if you put 100% width, it will just shrink to 1px.
Do you know how to create Selector, so it doesn't create parent div on elements. Thanks!

Your problem is that you are trying to overwrite the relative style in the child. You can easy control your Selector's style width just in 2 actions:
First of all, you have to change your max-width: object-fit, this property is used primarily for img or video tags. Change it's property like i did
.container{
position: relative;
max-width: 100%;
cursor: pointer;
}
Next time you can easy change you Selector's width.
I hope i've got your question correctly, have a good day!

If you want only the the square you can use 100vw insted of 100% :
const App = () => {
return (
<div className="workspace">
<Selector><Input style={{width: "100%"}} /></Selector>
<Selector><Block style={{width: "100vw"}} /></Selector>
</div>
);
}
Or make the .workspace 100% of the his parent, make the selector to take 100% of his parent (.workspace) and make the Block or the Input the sizess you want them to be :
<div className="workspace" style={{width: "100%"}} >
<Selector style={{width: "100%"}} ><Input /></Selector>
<Selector style={{width: "100%"}} ><Block/></Selector>
</div>
but you need max width to be 100% o n the css file.
max-width: 100%;

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

How can I overlay an icon on the top right corner of image?

Stack:
React
Relevant Package: FontAwesome => 'fortawesome'
Relevant Package: React Bootstrap => 'react-bootstrap'
What I currently have:
I am building a profile page and I would like users to be able to remove social media links with an "x" button.
This is my current code:
<React.Fragment>
<a href={social_item.url} key={social_item.id}>
<Image
className='m-2 shadow-sm'
width='32px'
src={
'https://www.google.com/s2/favicons?sz=128&domain_url=' +
social_item.url
}
rounded
/>
<FontAwesomeIcon
color='grey'
className='fa-stack the-wrapper'
icon={faTimes}
/>
</a>
</React.Fragment>
I know that when you are using two FontAwesome images you can overlay them using fa-stack. In this case, I am trying to overlay the "x" to the top right corner of the social media image.
My ideal outcome is something along these lines:
I have tried fa-stack but it does not appear to work when using icons in conjunction with images.
Any advice would be appreciated!

import React from "react";
const Icon = () => (
<React.Fragment>
<a alt="" href="" className="block-icon">
<Image
className="m-2 shadow-sm"
width="32px"
src={
"https://www.google.com/s2/favicons?sz=64&domain_url=yahoo.com"
}
rounded
/>
<FontAwesomeIcon
color="grey"
className="fa-stack the-wrapper icon-tag"
icon={faTimes}
/>
</a>
</React.Fragment>
);
export default Icon;
/* css */
.block-icon {
position: relative;
display: inline-flex;
}
.icon-tag {
position: absolute;
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 12px !important;
height: 12px !important;
}
You may not make width with the !important option but then svg close will take all the heights of the Image component in which case you should change top and right.
It gives something like this.

Making the link a a relative positioned block with "x" absolute positioned will work, like so:
a {
display: inline-block;
position: relative;
}
a .image {
display: block;
width: 25px;
height: 25px;
background-color: #f0f;
}
a .icon {
position: absolute;
right: 0;
top: 0;
line-height: 0;
}
<a>
<span class="image"> </span>
<span class="icon">x</span>
</a>

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>