Ensure the header remains in a fixed position while scrolling in an Angular/Ionic app

Currently, users with limited screen space in my application encounter this when they attempt to scroll down:

https://i.sstatic.net/Br0Wq.png

What I actually want is for the header items What are you looking for? and Current location to remain fixed:

https://i.sstatic.net/3pIpC.png

This is my current code:

<ion-view view-title="Nearby">
  <ion-content>
    <!-- Search -->
    <div class="list">
      <div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
        </label>    
      <div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
        <label class="item-input-wrapper">
          <input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
        </label>
        <button class="button button-positive button-small" ng-click="location=''; services=''">
          <i class="ion-close"></i>
        </button>
      </div>
    </div>

      <!-- List of services -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
          {{service.title}}
          <i class="icon-ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{service.total}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

    <!-- List of regions -->
    <div class="list" style="margin-top:-24px">
      <ion-list>
        <ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
          {{location.title}}
          <i class="icon ion-chevron-right icon-accessory">
                        <span class="badge badge-positive">{{location.count}}</span>
                    </i>
        </ion-item>
      </ion-list>
    </div>

  </ion-content>
</ion-view>

You can also view a CodePen demonstration here: http://codepen.io/anon/pen/VeQzBv.

Answer №1

If you're looking to enhance your code, consider implementing a sub-header like the one below:

 <ion-header-bar class="bar-light bar-subheader">
      <input type="text" placeholder="Search Force" data-ng-model="searchForce">
      <button ng-if="searchForce.length"
              class="button button-icon ion-android-close input-button"
              ng-click="clearSearch()">
      </button>
</ion-header-bar>

Check out this Codepen demo for reference.

To explore more options, refer to this post:

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

How to Retrieve Post Data for Each Field in AngularJS

Utilizing ng-model, I can easily retrieve data from a post by assigning an ng-model value to each field and accessing it from the $scope. But what about retrieving all fields values from a post without knowing each individual field? I'm looking for ...

Utilizing Angular 10 to Transform a JSON Data into a Custom String for HTML Rendering

I have received a JSON response from my backend built using Spring Boot. The "category" field in the response can either be 1 or 2, where 1 represents Notifications and 2 represents FAQs. { "pageNumber": 0, "size": 5, "totalPages&q ...

Basic Tallying Code in JavaScript

Hi, I am currently working on creating a basic counter using HTML / CSS and Javascript. Unfortunately, my Javascript code is not functioning correctly, even after trying various solutions found online. I attempted to include "async" but it appears that my ...

The values of the elements in the image array are null when not inside the

I need help converting an image into a Uint8Array for use in F5 steganography with the f5stego package. After trying to implement this, I encountered an issue where the imageArray contains all zeroes when printed outside the function, but inside it holds ...

Exploring the power of Express.js by utilizing local variables and rendering dynamic views

I am in the final stages of completing an application using node.js and express, even though I am still relatively new to them. Here's my situation: In my app.js file, I have declared a variable app.locals.webLang and set its initial value to "EN". T ...

Error in Access-Control-Allow-Origin when using Node.js and JSONP

It seems like JSONP eliminates cross domain restrictions. I am currently attempting to create a JSONP service with node and express. Below is a simple example of the code: self.routes['/portfolio'] = function(req, res) { // Website you wis ...

How come the size of an image does not adjust in a predetermined list?

My goal is to create a basic gallery. I have specified the width and height of li and the size of img, but it's not working as expected. I want all images to be the same sizes. What am I missing in my code? body { margin: 0; padding: 0; ...

Deactivate button using Javascript

Can anyone assist me with this issue I am having? I currently have a button set up as follows: <input type="button" id="myButton" name="myButton" value="ClickMe!!" onClick="callMe()"/> I need to disable the button using jQuery, standard javascript ...

Console log messages not displaying in Express.js app method

const express = require("express"); const app = express(); app.listen(3000, function () { console.log("Server started at port 3000."); }); app.get("/", function (req, res) { console.log("Hello, world"); const truck = "drive"; res.send("Hello, ...

Executing the OnChange event of the "Select" feature in Delphi with WebBrowser

In my Delphi project, I am using the WebBrowser component to navigate a HTML page that contains a ComboBox. Is there a way to trigger the OnChange event of the ComboBox? Here is how the ComboBox is structured: <select name="comboname" onchange="Some J ...

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

Cancel a batch upload request using AJAX

Currently, I am working on implementing a feature for aborting a multiple file upload process while also displaying the progress of the upload with a progress bar. My objective is to ensure that when the user clicks on the abort button, not only does the ...

"Enhance your design with a cutting-edge gradient button using CSS

While exploring gradient effects in CSS, I stumbled upon this unique button design. After extensive searching on the internet, I couldn't find a solution on how to recreate the same button effect using CSS. Is it possible to create it using CSS?Button ...

Error in Firebase Cloud Function: Function did not return the expected Promise or value and instead returned undefined

I've been encountering an issue with my cloud function that triggers on specific database writes (onCreate). It seems to be working fine, but I keep getting an error message stating "Function returned undefined, expected Promise or value" even though ...

Tips for combining two identical objects into a single entity

I have been working on creating a multi-select dropdown component that offers manual filtering. Initially, the component displays items by looping through an array of objects: items = [ {name: "Jake", city: "Phoenix", state: "AZ", code: 43434}, ...

Sorting Json Data Using Vue

My experience with Vue.js led me to a challenge I can't quite figure out: how to filter specific data in a Json file. Let me provide more context: I have a Json file filled with various electronics products such as computers, mice, keyboards, etc. I w ...

Error in Asp.net: 'test' is not defined in Microsoft JScript runtime

I'm encountering an issue with an ImageButton that has an onclientclick() method. Whenever I click the button, I receive the error Microsoft JScript runtime error: 'test' is undefined. Below is the full code snippet: <%@ Page Langua ...

It seems like there is an issue with the res.render function as it is

My goal is to capture an input from my main website. Once the input is submitted, the page should automatically redirect to /view. Despite successfully triggering the redirection with console.log(), the res.render function does not seem to be working as ex ...

Utilizing Bootstrap's responsive design to create optimal spacing between boxes

I have designed this webpage layout using Bootstrap. Although I have manually added margin between the rows, I now want to include vertical spacing between the columns when the page is resized. Can anyone help me achieve this? Full-size browser: Resize ...

Troubleshooting Problem with Bootstrap 4 Navigation Drop-Down Menu

I am working on developing some navigation forms for my university projects. I encountered an issue where I selected the Book item, and the navigation was working fine. However, when I selected Child items and then clicked on the Organization item, the nav ...