React: Overlay on hover without outer container for element

user_7568895 0
Viewed 432

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!

reactjs css-position css html javascript
2 Answers

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!

user_172701330

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%;
user_171373700
Related