Sweg
March 22, 2020, 2:06pm
1
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
Sweg
March 23, 2020, 12:30pm
3
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
Sweg
March 23, 2020, 12:43pm
5
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
Sweg
March 23, 2020, 1:21pm
7
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:
Change div
in the CSS to ion-fab > ion-fab-button
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