Is there a way to add a sub-heading into the side menu?

We are currently developing an application that utilizes ngCordova and we want to implement a side menu feature. The side menu has already been set up and you can see it below.

https://i.stack.imgur.com/fiv39.png

After adding the subheader, this is how the menu looks: https://i.stack.imgur.com/DBr0m.png

This snippet shows our code for the side menu: 

<ion-view title="Home" ng-app="app.controllers"  >
    <ion-header-bar class="bar bar-subheader bar-positive">
        <h1 class="title">Subheader</h1>
    </ion-header-bar>
    <ion-side-menus ng-controller="homeCtrl">

        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable nav-title-slide-ios7">
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                    </button>
                </ion-nav-buttons>               
            </ion-nav-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>


        <ion-side-menu side="left" >

            <ion-header-bar class="bar-stable bar-dark">
                <h1 class="title">Category</h1>
            </ion-header-bar>

            <ion-list class="dark">
                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-ionic-outline ion-ios-home-outline"></i><span style="color:#666">Home</span>
                </ion-item>

                <ion-item nav-clear menu-close href="#/tab/home" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-home-outline"></i><span style="color:#666">Home</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-paw-outline"></i><span style="color:#666">Dogs</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-cog-outline"></i><span style="color:#666">Profile Settings</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-checkmark-outline"></i><span style="color:#666">History Orders</span>
                </ion-item>
            </ion-list>
        </ion-side-menu>
    </ion-side-menus>
</ion-view>

We want the subheader to have the same left and right movement functionality as the menu button, but currently it's not behaving as expected. How can I resolve this issue?

angularjscordovaionic-framework

Answer №1

The subheader is not displaying correctly in the side menu because it is defined outside of the element. Moving the code below to the <ion-side-menu side="left> will resolve this issue:

<ion-header-bar class="bar bar-subheader bar-positive">
  <h1 class="title">Subheader</h1>
</ion-header-bar>

Place it within the 

<ion-side-menu side="left">
like this:

<ion-side-menu side="left">
  <ion-header-bar class="bar-stable bar-dark">
    <h1 class="title">Category</h1>
  </ion-header-bar>

  <ion-header-bar class="bar bar-subheader bar-positive">
    <h1 class="title">Subheader</h1>
  </ion-header-bar>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning a div next to an input box when it is in focus

I am working on a scenario where I have used CSS to extend the search box when focused. The idea is that when the search box is focused, it should decrease in size and a cancel button should appear next to it. This is the CSS code I am using: .clrble .fr ...

javascriptangularjscss

Displaying various charts in a single view without the need for scrolling in HTML

How can I display the first chart larger and all subsequent charts together in one window without requiring scrolling? This will eventually be viewed on a larger screen where everything will fit perfectly. Any recommendations on how to achieve this? Here ...

javascripthtmlcssangularjsplotly

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

javascriptcsscanvascordovahtml5-canvas

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...

javascripthtmlcssangularjs

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element? You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output ...

javascripthtmlcssangularjsangularjs-directive

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

angularjshtmlcssurl

Where can I locate a specific child element in this scenario?

Currently, I am exploring the possibilities of integrating AngularJS into my application and have encountered a question regarding the click event implementation. Within my HTML code: <div ng-click='clickMe()' ng-controller='testCtrl&ap ...

javascriptjqueryhtmlcssangularjs

Using Masonry with AngularJS templates: A step-by-step guide

Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...

htmlcssangularjsjquery-masonry

Ways to deactivate a button using CSS

I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...

javascripthtmlcssangularjs

Guide on how to refresh the background image using the identical URL within a directive

I am looking to refresh the background image of a div using the same URL within a directive. Upon loading my view, I utilized this directive to display the image as a background for the div. app.directive('backImg', function () { var dir ...

cssangularjsangularjs-directive

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

ioscsscordovamobile

Angular material is experiencing an issue where content is being cut off or

I am currently working on a project using AngularJS for a web application. I have encountered an issue where some of the content in the md-content element is being clipped. For instance, the body tag has the style: overflow: hidden, and the child md-conte ...

javascripthtmlcssangularjsangular-material

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

A combination of Webpack CSS modules with Angular templates

I am currently trying to integrate webpack CSS modules into my angular/ionic project. I'm wondering if it's possible for the CSS module class definitions to be correctly appended to an external template instead of an inline template. When I embe ...

cssangularjswebpack

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

jquerycssangularjstimepicker

Tips for positioning elements within an ng-repeat list using absolute positioning?

Here is the HTML code: <div class = "container"> <form ng-submit = "createSticky()"> <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/> <input ng-model= ...

htmlcssangularjs

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

javascriptcssangularjsiframe

What's the reason why Angular stops flickering with the use of "/" in href?

Recently, I've come across a peculiar issue in one of my web applications while using Angular's routeProvider as a template engine. The app functions properly, but the behavior seems inexplicable to me. The problem arises during page transitions ...

javascripthtmlangularjscss

Following the modification of the Context root, the JSP page is no longer functioning as expected

Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...

jquerycssangularjsjspweb