In ionic how can i put a button at some percentage from the bottom ion-content?
I've tried
<ion-view>
<ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-content>
</ion-view>
css:
.button-bottom{
position: absolute;
bottom: 30%;
}
but the button now not take the full width.
Try giving your container an explicit width:
.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}
Add "full" variable in your button
Ex:- button class="button button-block button-energized" full >Button</button>
For more reference see Ionic Documentation on UI Components in the link below.
Ionic Full Button
Just move the button to outside of the ion-content.
Example:
Ionic 3:
<ion-view>
<ion-content>
</ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-view>
Ionic 4:
<ion-header>
<ion-toolbar>
<ion-title>Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p> your content </p>
</ion-content>
<ion-row>
<ion-col>
<ion-button>
Button Bottom (Not fixed on scroll)
</ion-button>
</ion-col>
</ion-row>
Related
I have a side menu always visible in my ionic aplication, the problem is I don't know how to change the #shadow-root css, I tried a few things but still don't work.
The problem is that when I make the menu smaller and empty space is left there. I want to remove that empty space, because when the screen is bigger the empty space is even bigger.
I searched in the debug console and this is the troublesome element:
This is my code:
HTML:
<ion-split-pane contentId="side-menu" class="menu-left" when="md">
<ion-menu side="start" menuId="side-menu" contentId="side-menu" mode="md" class="menu2">
<ion-header>
<ion-toolbar>
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none" class="menu-content">
<ion-item (click)="navigateHome()">
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Inicio</ion-label>
</ion-item>
<ion-item (click)="navigateAnimes()">
<ion-icon name="library" slot="start"></ion-icon>
<ion-label>Animes</ion-label>
</ion-item>
<ion-item (click)="navigateMine()">
<ion-icon name="bookmarks" slot="start"></ion-icon>
<ion-label>Mi lista</ion-label>
</ion-item>
<ion-item (click)="navigateSettings()">
<ion-icon name="options" slot="start"></ion-icon>
<ion-label>Ajustes</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="side-menu"></ion-router-outlet>
</ion-split-pane>
CSS:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
Can anyone tell me how to apply my css attributes to the inner-scroll scroll-y in the shadow class please?
#phantomiam123 I updated my css class and doesn't work:
My css class now is:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
.inner-scroll .scroll-y {
width: 200px;
}
And in the debug console:
This seems to work for me for now:
.split-pane-visible > ion-menu {
max-width: 200px!important;
}
I have this kind of header in ionic 3
What I wanted to do was center the home title while ignoring the space occupied by my ion avatar
Here's what I tried
<ion-header >
<ion-navbar style="text-align: center;">
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
and this
<ion-header >
<ion-navbar>
<ion-title text-center>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
And then I tried implementing it directly and not inline
<ion-title class="center">Home</ion-title>
.center{
text-align: center;
}
To those who will encounter the same problem, please go to nourza's awesome and responsive answer :)
From this
to this
5]
Try this
.center{
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
You can use the following solution to selectively center text:
{
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
I've create a side menu.
and button inside it
<ion-content style="background-image: url(assets/imgs/background.jpg)" >
<div id="sideBody">
<ion-list>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{{p.title}}
</button>
</ion-list>
</div>
</ion-content>
</ion-menu>
how to make underline inside menu not showing and how change color text menu?
<ion-list no-lines>
<button menuClose ion-item *ngFor="let p of Func.getPages()" (click)="openPage(p, p.title)">
{{p.title}}
</button>
</ion-list>
Simply by putting no-lines property in like above i had edited your code.
I hope you can help me with this problem. Since yesterday I’ve been trying to position this green button on the right side. And things like margin don’t work:(
HTML
<ion-header>
<ion-toolbar color="rank">
<ion-searchbar (input)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list-header>
Friends
</ion-list-header>
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round>Add</button>
</ion-item>
</ion-list>
</ion-content>
Here the button
Just like you can see in the docs, you can achieve that by using the item-end attribute in the button:
<ion-list>
<ion-item>
<ion-avatar item-start>
<img src="img/fri.jpg">
</ion-avatar>
<h1>JanePrincess</h1>
<h3>Iceland, Reykjavik </h3>
<button ion-button color="rank" round item-end>Add</button>
</ion-item>
<!-- ... -->
</ion-list>
Use ion-item padding.
<ion-item padding>
<button default ion-button item-right color="rank" round >Add</button>
</ion-item>
You can use css as well.
I hope you made the CSS file for the above problem, so try putting the following code into it:
button {
color:green;
position:relative;
top:-43px;
left: 410px;
}
To adjust the position of the button horizontally, just adjust left position accordingly.
I referred to my button to align left and right start and end key as per the above link. But i am not able to set my button as per the view in the link here is my output image
Here is my code
<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>
<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>
</ion-navbar>
</ion-header>
What I have tried so far is:
float: right; and float: left;
algin: right
but not able to get my button to left
You can achieve that layout by using an <ion-toolbar> to place the search bar like you can see in this plunker
<ion-header class="home">
<ion-navbar primary padding>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
<ion-toolbar primary>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
EDIT:
To hide both borders, the no-border attribute should be used on the
ion-toolbar. To hide the top or bottom border, the no-border-top and
no-border-bottom attribute should be used.