How to display 3 buttons at end of leaflet map in ionic app?

I am trying to display a selection of buttons onto of my leaflet map in my ionic app.

Currently, I’m able to display a button at the bottom of the map:

Here is the HTML & CSS:

<div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
      <ion-button id="refreshButton" color="primary" (click)="findMe()">Find me</ion-button>
    </div>
  </div>

And here is the CSS:

.map-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

#refreshButton {
  position: absolute;
  bottom: 20px;
  right: 2px;
  padding: 10px;
  z-index: 400;
}

But I want to be able to display 3 buttons like so:

Can someone please tell me what changes I need to make so that I can display something like this?

I will do like this using a Flexbox. Information can be found here:

1 Like

Thanks for your answer, I’ve made some progress using flexbox below:

But I want the buttons to be spread further across the page. At the moment, they’re closer to the center, but I’d like the outer 2 buttons to be closer to the sides.

Here’s my current HTML & CSS:

<div class="map-container">
    <div class="map-frame">
<ion-fab bottom id="menuButtons" style="display: flex; justify-content: space-around;">
        <ion-row text-center>
          <ion-col>
            <ion-fab-button>
              <ion-icon name="home-outline"></ion-icon>
            </ion-fab-button>
          </ion-col>
          <ion-col>
            <ion-fab-button>
              <ion-icon name="chatbubbles-outline"></ion-icon>
            </ion-fab-button>
          </ion-col>
          <ion-col>
            <ion-fab-button>
              <ion-icon name="person-circle-outline"></ion-icon>
            </ion-fab-button>
          </ion-col>
        </ion-row>
      </ion-fab>
</div>
</div>
.map-container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.map-frame {
  // border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}

ion-content ion-toolbar {
  --background: translucent;
}#refreshButton {
  position: absolute;
  top: 20px;
  right: 2px;
  padding: 10px;
  z-index: 400;
}

#menuButtons {
  position: absolute;
bottom: 10px;
width: 100%;
padding: 10px;
}

Any ideas on how I can spread them out further?

First: Please don’t use inline Style, create classes for a better overview
Second: I think this is because the width isn’t 100%
Third: You don’t need the “ion-row” Stuff. Try like this:

<div class="map-container">
    <div class="map-frame">
      <ion-fab bottom id="menuButtons" class="menu-buttons">
        <ion-fab-button>
            <ion-icon name="home-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button>
            <ion-icon name="home-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button>
            <ion-icon name="home-outline"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </div>
</div>

The Class .menu-buttons must look something like:

width: 100%;
display: flex;
align-items: center;
justify-content: space-around; // or maybe space-between - check what fits for you 

I’ve made the above changes you mentioned, but now it’s displaying like so:

Also doesn’t work with space-between.

Here is the full HTML & CSS:

<ion-content>
  <div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
      <ion-fab bottom id="menuButtons" class="menu-buttons">
        <ion-fab-button>
          <ion-icon name="home-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button>
          <ion-icon name="chatbubbles-outline"></ion-icon>
        </ion-fab-button>
        <ion-fab-button>
          <ion-icon name="person-circle-outline"></ion-icon>
        </ion-fab-button>
      </ion-fab>
      <ion-button [routerLink]="['/chat']">Navigate
      </ion-button>
      <ion-button fill="clear" id="refreshButton" (click)="findMe()">
        <ion-icon slot="icon-only" name="navigate-circle-outline"></ion-icon>
      </ion-button>
    </div>
  </div>
</ion-content>
.map-container {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.map-frame {
  height: 100%;
}

#map {
  height: 100%;
}

#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}

ion-content ion-toolbar {
  --background: translucent;
}

#refreshButton {
  position: absolute;
  top: 20px;
  right: 2px;
  padding: 10px;
  z-index: 400;
}

#menuButtons {
  position: absolute;
bottom: 10px;
width: 100%;
  padding: 10px;
  // z-index: 400;
}

.menuButtons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around; // or maybe space-between - check what fits for you
}

set the flex-direction to column - read my original answers link

I’ve started a new project, & added the below HTML & CSS:

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}
.flex-container > div {  
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

The div’s are then displayed like so:

The only changes I then make are:

  1. Change div in the CSS to ion-fab > ion-fab-button
  2. Replace the div's in the HTML with ion-fab
<div class="flex-container">
    <ion-fab>
      <ion-fab-button>
        <ion-icon name="home-outline"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="chatbubbles-outline"></ion-icon>
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon name="person-circle-outline"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </div>
.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

.flex-container > ion-fab > ion-fab-button {
 
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

This is what is now displayed:

I think in this Context the ion-fab need the “flex-container” Class

1 Like

This fixed the issue.