I'm new to ionic and I've been struggling to add a logo to the sidebar menu which will shrink / expand when you switch from portrait to landscape. See example below,
Why I want to shrink the logo is so that all the items can be shown together and the user doesn't have to scroll. This would apply to smaller screens as well (If all the items can't be shown in one screen the logo should reduce it's size to make room.)
This is my template,
<ion-side-menu side="left">
<ion-header-bar class="logo">
< img src="/images/logo.png" />
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ui-sref="x.1" class="item-icon-left"> 1 </ion-item>
<ion-item menu-close ui-sref="x.2" class="item-icon-left"> 2 </ion-item>
<ion-item menu-close ui-sref="x.3" class="item-icon-left"> 3 </ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
and the CSS
.logo img {
max-height: 56px;
max-width: 120px;
margin: 0 auto;
margin-top: 20px;
display: block;
}
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'm trying to move my cards to the left to eliminate the space in the left margin.
I can't seem to move the cards closer to the left to eliminate the space in the left margin.
And I'm trying to add the title next to the avatar and the description at the bottom.
<ion-item *ngSwitchDefault>
<ion-card-content style="margin-left: 1px;" class="lists">
<ion-list *ngFor="let topic of groupTopics">
<ion-card style="width: 280px; height: 150px; margin: 1px; margin-left: 2px;" [ngSwitch]="topic.photoUrl">
<ion-avatar *ngSwitchDefault slot="start">
<img [src]="topic.photoUrl" />
</ion-avatar>
<ion-avatar *ngSwitchCase="'false'">
<img src="assets/img/add-an-image.png" />
</ion-avatar>
<ion-label>
<h2>{{topic.title}}</h2>
<p>{{topic.description}}</p>
</ion-label>
</ion-card>
</ion-list>
</ion-card-content>
</ion-item>
I need to remove hamburger default icon menu on ionic menu. I've added custom menu and I need to remove default icon.
So my code:
<ion-menu side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
My layout menu:
Html button code:
<ion-header _ngcontent-yjt-c1="" role="banner" class="ios header-ios hydrated">
<ion-toolbar _ngcontent-yjt-c1="" class="ios hydrated">
<ion-buttons _ngcontent-yjt-c1="" slot="start" class="buttons-first-slot sc-ion-buttons-ios-h sc-ion-buttons-ios-s ios hydrated">
<ion-menu-button _ngcontent-yjt-c1="" class="hydrated ios button ion-activatable ion-focusable"></ion-menu-button>
</ion-buttons>
<ion-title _ngcontent-yjt-c1="" class="ios title-ios hydrated"></ion-title>
</ion-toolbar>
</ion-header>
I need to remove default icon inside circle. How to do to remove?
Can you please try the following css rules?
Can you please check if they don't work if they get added to the css of the page you are viewing?
ion-menu-button {
display: none !important;
}
or
ion-buttons {
display: none !important;
}
or
.button.ion-activatable.ion-focusable {
display: none !important;
}
Add the below styles in your app.scss file to hide the default menu button
.bar-button-menutoggle {
display: none !important;
}
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.
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>