CODEWITHSUNDEEP
htmlcssionic-frameworkionic3
EyTa
EyTa

Reputation: 109

Split screen into two individual equal parts ionic 3

At the moment, they aren't equal:

<div class="homescreen-content" scroll="false">
  <h2>Top</h2>
  ITEM 1
  <hr>
  <h2>Bottom</h2>
  ITEM 2
</div>

I want to split the screen equally, and want it to be responsive and centred. Is there a way to do it with SplitPane?

enter image description here

Upvotes: 1

Views: 2663

Answers (3)

Nandita Sharma
Nandita Sharma

Reputation: 13417

Try this html and CSS

body , html {
  height: 100%;
}
.container {
  height: 100%;
  
}
.upper {
  border-bottom: 2px solid;
  height: 50%;
}
.lower {
  height: 50%;
}
<div class="container">
   <div class="upper">
     <h2>Top</h2>
     ITEM 1
   </div>
   <div class="lower">
    <h2>Bottom</h2>
    ITEM 2
   </div>
</div>

Upvotes: 0

VXp
VXp

Reputation: 12078

You can do it with the Flexbox:

body, hr {margin: 0}

.homescreen-content {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100vh; /* 100% of the viewport height */
}

.homescreen-content > div {
  display: flex;
  justify-content: center; /* horizontally centered */
  align-items: center; /* vertically centered */
  flex: 1; /* each stretches and takes equal height of the parent (50vh) */
}
<div class="homescreen-content" scroll="false">
  <div>ITEM 1</div>
  <hr>
  <div>ITEM 2</div>
</div>

Upvotes: 0

Taieb
Taieb

Reputation: 920

.homescreen-content {
    height: 100%;
    display: flex;
  }
.split {

    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
    
}

.test1 {
    left:0;
    height: 55%;
    width: 100%;
    background-color: $white-love;
    border-bottom: 2px solid;
}

.test2 {
    
    left:0;
    top: 55%;
    height: 50%;
    width: 100%;
    background-color: $white-love;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
This is may work:

<div class="homescreen-content" scroll="false">
        <div class="split test1">
                <div class="centered">
                  <h2>TEST1</h2>
                   </div>
              </div>
              <hr>
              <div class="split test2">
                <div class="centered">
                  <h2>TEST</h2>
                </div>
              </div>
</div>

Upvotes: 1

Related Questions