[SOLVED] How to put two ionic angular lists components next to each other?

How to put two ionic angular lists components next to each other?

I have two angular components which are scrollable lists, but they follow each other vertically on the page/screen. I want them side by side, but play well with Ionic?

I tried wrapping them each in a < div >, but just a div with no class and no styling makes the lists disappear!

The MMM components are each an < ion-list > in a < cdk-virtual-scroll-viewport > What do I do to work with the ion components in an ion content?

<ion-content [fullscreen]="true" [scrollY]="false">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Match Title (Content)</ion-title>
    </ion-toolbar>
  </ion-header>
  <!-- <div> don't wrap then each in a div then they disappear -->
    <mmm-facet-menu></mmm-facet-menu>
  <!-- </div> -->
  <!-- <div> -->
    <mmm-species></mmm-species>
  <!-- </div> -->
  <!-- <app-explore-container name="Match Content"></app-explore-container> -->
</ion-content>

This code fragment is from a newly generated tab sample app (note the < app-explore-container> )

Solution

Here is my suggestion to resolve the issues you encounter

use ion-content and ion-grid

you can use ion-grid to display your components side by side

 <ion-content [fullscreen]="true" [scrollY]="false">
   <ion-header collapse="condense">
       <ion-toolbar>
           <ion-title size="large">Match Title (Content)</ion-title>
       </ion-toolbar>
   </ion-header>
   <ion-content>
       <ion-grid>
          <ion-row>
              <ion-col>
                  <mmm-facet-menu></mmm-facet-menu>
              </ion-col>
              <ion-col>
                  <mmm-species></mmm-species>
              </ion-col>
          </ion-row>
       </ion-grid>
   </ion-content>
 </ion-content>

there is a documentation for ion-grid in the ionic framework website that you can check to manipulate how you want the grid to look.

I hope this guides you in resolving your issue