Cheers I have an ion menu that I wanna make smaller, about 50% of the screen instead of the default width. I swear I have checked out every single post on the ionic forum and stackoverflow about this and tried everything people have posted in the past but nothing worked, what am I supposed to do to get it done?
Can you post your css?
Iâd check here for menu css variables
Cheers, ye sure, although I donât think I have anything special in my css, just some simple stuff to make the side menu look better
Well yeah I have tried every bit of css I have found on forums to make the side menu smaller but nothing has worked
Try adding --max-width: 200px or your desired width to the ion-menu-button block
If you want the menu smaller than default use --max-width, and if you want it larger use --min-width
Where and how exactly do I use the max and min width tags? Because I have tried them already, both with inline styling aswell as putting it in the global.scss for the ion-menu and it just doesnât work
ion-menu {
--max-width: 200px;
// OR
--min-width: 200px;
}
Also check your package.json to make sure youâre on the latest @ionic/angular version
1 Like
Welp that was the first thing I tried like 2 hours ago, doesnât work.
Also yes I am running the latest version of ionic/angular.
Is './app.component.scss' added to your app.component.ts @Component styleUrls array? Iâve noticed the ionic CLI doesnât give you an app component css page to start
1 Like
I am using the sidemenu template, not the blank one, and it didnât create a component.scss
and since the menuâs html is in the component.html and I dont have a scss file just for it, I put the scss code for the ion-menu in the global.scss file, but Iâve tried in line styling the ion-menu aswell
You can manually add a scss called app.component.scss and add
styleUrls: ['./app.component.scss']
To your app.component.ts @Component decorator. This way you can maintain styling similar to the rest of the pages/components. I think it has to be applied to the app component, not globally
1 Like
Welp it didnât work again using
ion-menu {
âmax-width: 200px;
}
in the newly created app.component.scss, i just got mad, created a new project and copy pasted all the pages and services and scss and assests into the new project, and now it works perfectly.
Iâm left with no words, thanks mate for trying to help me out but turns out it was something to do with the project, when everything is fully updated on a clear project, its working perfectly!
Wow. yeah thatâs really weird because my examples were how Iâve definitely achieved it before so Iâm not sure what would have been preventing it in your project and not in a new one. Good thinking though!
1 Like
There is something else in my mind now, I was thinking of replacing the static widthâs value
ion-menu {
âmax-width: 200px;
}
in the scss file to something more dynamic like, if he is logged in then have a max width and if he isnât then have another, I tried this:
<ion-menu [âmax-width]=âisLoggedIn ? â275pxâ : â200pxââ>
but console outputs âCanât bind to ââmax-widthâ since it isnât a known property of âion-menuâ.â
I tried with max-width too, doesnât recognize the property
Do you have any ideas how I could accomplish this?
Try
[ngStyle]="{'--max-width': isLoggedIn ? '275px' : '200px'}"
I just looked up the syntax for a conditional ngstyle and what you proposed really seems to be it, but unfortunately itâs not working, its not giving me any error about it in the console, but it isnât changing the menuâs width either, have you used something like this before?
For now Iâm going to be doing this, since it works
HTML:
<ion-menu type=âoverlayâ [class.menuBig]=âisLoggedInâ [class.menuSmall]=â!isLoggedInâ>
SCSS:
.menuSmall{
âmax-width: 200px;
}
.menuBig{
âmax-width: 270px;
}
but I really wanted the conditional ngStyle to work exactly like you suggested since its way more clean, I tried another conditional ngstyle and it worked, so Iâm guessing itâs not working on the property --max-width
ion-menu position is absolute. and u will have to change width of ion-header, ion-content, ion-footer inside that ion-menu. TTRockStars
Ah my mistake
Can you use ngClass in a similar way?, Have 2 classes with your --max-width values, and toggle between those
The code I shared works perfectly, I just wished the ngStyle worked aswell since it is way more clean but its alright, thank you for your help!
NgClass is slightly more clean, only 1 line
[ngClass]="{'menuSmall': !isLoggedIn, 'menuBig': isLoggedIn}"
But this should work exactly the same to your [class.xxxxx]