0

i want a div2 to be placed to the left of div1. i have below method to do that..i pass alignment as 'left' and it returns x and y coordinates for it based on div1.

Below is the method,

const position_val = position(rect, 'right');

position = (rect, alignment) => {
     switch(alignment) {
        case 'left':
            return {x: rect.left - (this.props.start_offset || 0), y: rect.top + (rect.height / 2)};
        case 'top':
            return {x: rect.left + (rect.width / 2) , y: rect.top};
        case 'bottom':
            return {x: rect.left + (rect.width / 2), y: rect.bottom};
        case 'right':
            return {x: rect.right + (this.props.start_offset || 0), y:rect.top + (rect.height / 2)};
        default:
            return {x: (rect.left + rect.width / 2), y: rect.top + (rect.height / 2) + 
            (this.props.end_offset || 0)};
    }

from the above code case default and 'right' work well..however i am not sure where to offset_x and offset_y values in case left, top and bottom...

once the values are returned from position method i apply them to top and left of div2 element like below,

div2.style.top = position_val.y;
div2.style.left = position_val.x;

could someone help me fix this method to get correct values for case left, top and bottom. thanks.

someuser2491
  • 1,848
  • 5
  • 27
  • 63
  • Possible duplicate of [React.js inline style best practices](https://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices) – Emile Bergeron Nov 22 '19 at 16:15

1 Answers1

0

If you create a style.scss file, you can place the divs into columns and set them next to each other like this.

.div-wrapper-parent{
    display: grid;
    grid-template-columns: 1fr 1fr;

    .div1{
        align-items: center;
    }

    .div2{
        align-items: center;
    }
}
The1stFugitive
  • 3
  • 3