Full screen sidebar

ionic-v1
1

Hi Ioners!

Is it possible to set a full screen side bar? Currently there is a fixed width and I need it to be full screen.

Thanks for your help!

Regards,

Chris

2

Yeah it is :

 <ion-side-menu side="left"  width="500">
</ion-side-menu>

From the docs

/**
 * @ngdoc directive
 * @name ionSideMenu
 * @module ionic
 * @restrict E
 * @parent ionic.directive:ionSideMenus
 *
 * @description
 * A container for a side menu, sibling to an {@link ionic.directive:ionSideMenuContent} directive.
 *
 * @usage
 * ```html
 * <ion-side-menu
 *   side="left"
 *   width="myWidthValue + 20"
 *   is-enabled="shouldLeftSideMenuBeEnabled()">
 * </ion-side-menu>
 * ```
 * For a complete side menu example, see the
 * {@link ionic.directive:ionSideMenus} documentation.
 *
 * @param {string} side Which side the side menu is currently on.  Allowed values: 'left' or 'right'.
 * @param {boolean=} is-enabled Whether this side menu is enabled.
 * @param {number=} width How many pixels wide the side menu should be.  Defaults to 275.
 */
3

Hi Siddhartha, thanks for your input. I see you specify 500 pixels as width. Does it mean that Ionic will align the sidebar to the screen size if its bigger than a screen? I cannot see anything in the documentation about it?

4

I don’t get you.
I was just showing you how to set the width of the side menu. If you want to make it fill the screen size horizontally, then find the window width and then bind it to the view as a value to the width attr.

controller : 

$scope.myWidth = getWindowWidth();

index.html : 

<ion-side-menu width="myWidth">