-1

I need to vertically centre the ion-menu contents so that it is easier to access from a UX perspective. I am not sure of the best way to do it.

This is the ionic starter project code, which was set up by ionic start myProjectName sidemenu. 

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
    <ion-list lines="none">
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="https://ionicframework.com/docs/">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/building/scaffolding">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Scaffold Out Your App</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/layout/structure">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Change Your App Layout</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/theming/basics">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Theme Your App</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

Ionic starter template

So I am trying to do something like below. enter image description here

Edit: Ionic component directives already use flex. I'm seeking a solution specific (preserving the responsiveness) to Ionic 4 where an ion-menu is nested in an ion-list inside an ion-content directive. None of the answers provided in the SO links is applicable to my question.

Sebin Benjamin
  • 1,758
  • 2
  • 21
  • 45
  • So many duplicate questions about vertical alignment, please do some research before posting a question. Also questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and **the shortest code necessary to reproduce it in the question itself**. – Pete Jun 28 '19 at 10:34
  • Updated the question. This specific to the Ionic framework and not a general CSS/flexbox alignment question. – Sebin Benjamin Jun 28 '19 at 10:35
  • You can use general css in ionic apps – Pete Jun 28 '19 at 10:37
  • That would not be the recommended solution? PS: I have already include the desired behaviour. The problem is very specific. And have provided links to the official starter code. – Sebin Benjamin Jun 28 '19 at 10:39
  • Please read the bit in bold of my above comment - links to external sites may rot over time and as SO is a repository for future users who may have the same problem, this question will become useless - without code in the question, then this question is off topic for SO, please refresh yourself with the rules. Also you do understand that ionic is still just html5 don't you, so the solutions suggested will work – Pete Jun 28 '19 at 10:40
  • I had already added the single line CLI command to get the code and project setup - `ionic start myProjectName sidemenu`. Anyway, added the shortest code necessary. – Sebin Benjamin Jun 28 '19 at 10:48
  • Even the ionic forum suggests using flex: https://forum.ionicframework.com/t/vertically-align-center/58377/4 – Pete Jun 28 '19 at 10:49
  • Ionic already uses flex in its components. That forum post is for just centering text. It's not related to the problem in this question, ie aligning an ion-menu in an ion-list nested in an ion-content directive. – Sebin Benjamin Jun 28 '19 at 10:59

2 Answers2

1

Ionic give API for fix menu bar in left and right option only. If you want to make like the above image you can use your own css like 'margin-top: 80px'

0

You can use either a grid layout or a flex layout to achieve this. Since you have elements in only one dimension, horizontal, flex would be an ideal option. Try the below code

.menu {
  height: 500px;
  width: 250px;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
}

.item {
  padding: 1em;
  border-bottom: 1px solid #ddd;
  width: 100%;
}
<div class="menu">
  <div class="item">
    Home
  </div>
  <div class="item">
    About
  </div>
</div>
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
  • ionic components are already using flex heavily. ion-menu, ion-content etc are in flex containers. – Sebin Benjamin Jun 28 '19 at 10:15
  • again, if you have contents only in one dimension, flex is ideal. I think that would answer your question. Thanks :) – Nidhin Joseph Jun 28 '19 at 10:16
  • I need to use ionic-components/directives (which already use flex), NOT divs. Please check the code in the starter project https://github.com/ionic-team/starters/blob/master/angular/official/sidemenu/src/app/app.component.html – Sebin Benjamin Jun 28 '19 at 10:24
  • I do understand your suggestion on using flex (or even CSS grids), but I need a solution which works within the ion - directives – Sebin Benjamin Jun 28 '19 at 10:26