CODEWITHSUNDEEP
cssreactjssass
Naffets
Naffets

Reputation: 179

ReactJS Split screen in two halves

How can I split the screen in two halves such as: enter image description here in order for in each half to add my custom elements?

Example: the blue side is a picture, the second half contains some random text inputs

I've been trying like this:

<div className={styles.splitScreen}>
        <div className={styles.topPane}>
          {topPane}
        </div>
        <div className={styles.bottomPane}>
          {bottomPane}
        </div>
      </div>

with a scss file containing:

.splitScreen {
  position: relative;
  height: 100vh;

  .topPane,
  .bottomPane {
    position: relative;
    width: 100%;
    height: 50%;
  }

  .topPane {
    transform: rotate(180deg);
  }
}

but to no success.

Upvotes: 5

Views: 21286

Answers (2)

Mario
Mario

Reputation: 968

This sounds like a good use case for CSS flexbox. CSS FLEXBOX

<div className={styles.splitScreen}>
  <div className={styles.topPane}>{topPane}</div>
  <div className={styles.bottomPane}>{bottomPane}</div>
</div>

styles object:

splitScreen: {
    display: 'flex';
    flexDirection: 'row';
},
topPane: {
    width: '50%',
},
bottomPane: {
    width: '50%',
},

EDIT: If they should be side-by-side, use flexDirection: 'row',.

Upvotes: 7

ellitt
ellitt

Reputation: 833

Sounds like you want flexbox or css-grid.

Since there's already an answer for flexbox from iepur1lla, here's a css-grid alternative;

.splitScreen {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

And if you want to be sure that topPane and bottomPane are always in these two positions, you can add this to the CSS:

  .topPane {
    grid-column: 1;
    grid-row: 1;
  }

  .bottomPane {
    grid-column: 2;
    grid-row: 1;
  }

Upvotes: 2

Related Questions