How can input be fixed in place within a list inside an Ionic framework popover?

I have the following code in a popover template:

<ion-popover-view class="customPopup">


  <ion-header-bar class="bar bar-header barHeaderCustom">
    <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1>
  </ion-header-bar>

  <ion-tabs class="tabs-icon-only tabs-top tabs-positive">

    <ion-tab title="{{ 'SOUNDS' | translate }}">
      <ion-content class="has-header">
        <!-- SEARCH INPUT-->
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="{{ 'SEARCH' | translate }}" ng-model="searchedStringSingleSounds">
        </label>
        <!-- //SEARCH INPUT-->
        <div ng-click="addSoundToSelection({{$index}},'singles')" class="item item-button-right" ng-repeat="sound in availableSounds| filter:searchedStringSingleSounds">
          {{sound.name}}
          <button class="button button-positive" >
            <i class="icon ion-plus-circled"></i>
          </button>
        </div>
        </div>
      </ion-content>
    </ion-tab>

This code generates the following popover window:

The issue is that the input field is scrolling with the list view content, but it should be static. How can I fix this?

I have tried to find a solution in the documentation, but so far, no luck.

Thank you for any advice.

Answer №1

Transfer your input element from inside ion-content to a subheader section

<ion-header-bar class="bar bar-header barHeaderCustom">
  <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1>
</ion-header-bar>

<div class="bar bar-subheader item-input-inset">
 <label class="item-input-wrapper">
   <i class="icon ion-search placeholder-icon"></i>
   <input type="text" placeholder="{{ 'SEARCH' | translate }}" ng-model="searchedStringSingleSounds">
 </label>
</div>

Next, apply the has-header has-subheader classes to your ion-content tag

<ion-content class="has-header has-subheader">

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

The Safari browser is having trouble rendering the website's CSS and HTML properly

Check out this example of how the website should look on Chrome for Android: https://i.stack.imgur.com/RzUSp.jpg And here is an example from Safari on iPad Mini 2: https://i.stack.imgur.com/PAj2i.jpg The Safari version doesn't display the proper fon ...

Troublesome Issue with ngAnimate and ngHide: Missing 'ng-hide-animate' Hook Class

I am working on a case where I need to add animation to a DOM object using the ngHide directive: Check out this example here Within this scenario, I have an array of JSON objects: $scope.items = [ {"key": 1, "values": []}, {"key": 2, "values": [ ...

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

Can the autoscroll offset be adjusted while dragging?

I am developing a single-page application using Vue.js. The user interface consists of three main components: A fixed navbar at the top with a z-index of 2 A fixed sidebar on the left with a z-index of 1, and padding to accommodate the navbar A central ar ...

Unable to set DIV to 'inline-block' or none based on checkbox selection

Despite reviewing multiple examples, I am still struggling to make this DIV visible and hidden by clicking a checkbox. Can someone please review my JavaScript code? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten ...

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

The type definition file for '@types' is not present in Ionic's code base

After updating my Ionic 6 project to use Angular 3, everything works perfectly in debug mode. However, when I attempt to compile for production using 'ionic build --prod' or 'ionic cordova build android --prod', I encounter the followin ...

How to ensure two unordered lists are aligned at the same baseline using CSS

Is it possible to align two UL's to a single baseline, with one UL aligned flush left and the other flush right? Currently, the UL's are not aligned and appear like this: How can I make sure the two UL's share the same baseline? CSS #foo ...

Customize the appearance of semantic-ui-react components with hover effects

When I assign a specific className to components like <Segment className="Change" color='blue' inverted></Segment> and then in my CSS I apply the following: .Change:hover{ background-color: black; //or any other hover effect } N ...

Importing CSS into the styles section of angular.json is no longer feasible with Angular 6

Currently in the process of migrating a project to Angular 6, I'm facing an issue with importing my CSS file within the styles section of angular.json: "styles": [ "./src/styles.css", "./node_modules/primeng/resources/primeng.min.css", ...

Creating a unique and personalized dual-row navigation bar using Bootstrap

Currently, I am striving to achieve a "conflict free" two-row fixed-top navbar in Bootstrap 3. I am unsure if it necessitates two separate "navbars" according to the official Bootstrap definition. While I possess decent coding skills, my knowledge of the B ...

The bootstrap navbar dropdown feature isn't functioning properly on iPhones

Currently utilizing "bootstrap": "~3.3.4" within the mean.js framework, I am facing an issue with the navbar dropdown menu. On desktop, everything functions as expected - the dropdown opens and remains open when the icon is clicked. However, once deployed ...

What is the best method for serving static files within a nested EJS view directory?

Assuming I have the directory structure below: |--Views/ | --partial/ | --links.ejs | |--assets/ | --css/ | --styles.css | |--server.js Code for links.ejs <link rel="stylesheet" type="text/css" href="css/forms/switches.css"& ...

Having difficulty getting the HTML table formatting and colors to display properly

Explore the custom netting options for baseball and softball batting cages here. It seems like there might be an issue with displaying tables and background colors in the description field. We'll look into it! ...

Tips for managing responsive font sizes as screen size decreases

Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries. You can check out th ...

Is there a glitch in the Selenium Java CSS Selector functionality?

Everything seems to be working smoothly with that code! It successfully locates and clicks on my button within the span tag. driver.findElement(By.cssSelector("span[id$=somePagesCollection] a")).click(); However, after clicking the button, an input field ...

Is it possible to modify the CSS styling in React using the following demonstration?

I am attempting to create an interactive feature where a ball moves to the location where the mouse is clicked. Although the X and Y coordinates are being logged successfully, the ball itself is not moving. Can anyone help me identify what I might be overl ...

Remove padding in Twitter Bootstrap table cells

One of my current projects requires making a button that fills the entire width and height of the TD element. I have attempted setting the normal .btn-warning with -Xpx!important, but it did not produce the desired result. Here is what I currently have: ...

Single-line form with labels positioned above the input fields

For my web app project, I am using AngularJS and Bootstrap 3 for CSS (although my CSS knowledge is limited). I am trying to design an inline form with 5 input fields and labels positioned on top of them. The first field should take up more space than the o ...