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

Unlimited Lunch Options and Navigational Links

Looking for help with displaying the ul for MAINTENANCE and referencing specified classes from a CSS style sheet that are working elsewhere. However, the sub menu for MAINTENANCE is not showing up. Any suggestions? /* * Superfish v1.4.8 - jQuery menu w ...

The HTML select element - Styling the selected item using the option font

Currently, I am working on adding a font dropdown list to a web page. Each option in the dropdown list is styled with the corresponding font it represents like this:- <option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans ...

What could be the reason for the nav icon not displaying?

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Boot ...

What is the best way to manage these interconnected Flexboxes when using align-items: stretch?

Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...

Can you have two navigation bars and a picture all in one Bootstrap layout?

I have a requirement to use a single image on two different Bootstrap navbars. However, the issue is that the image appears split between the two navbars.https://i.stack.imgur.com/jUnIL.png My goal is to display the full image without it being divided bet ...

Issue "The only acceptable numeric escape in strict mode is '' for styled elements in Material-UI (MUI)"

Attempting to utilize the numeric quote for quotation marks, I encountered an issue: 'The sole legitimate numeric escape in strict mode is '\0` The snippet of code causing the problem can be seen below: export const Title = styled(Typogra ...

How can I create a custom elevation for a Vuetify v-menu?

I'm currently working with vuetify and v-menu as outlined in the official documentation here https://vuetifyjs.com/en/components/menus/ I'm struggling to figure out how to apply elevation only on the bottom left and right corners. When I add a ...

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

CSS and the best practices for button styling in a navigation bar

My friend and I are facing a CSS issue while working on a webpage together. We both have limited experience with HTML and CSS. Here's the code snippet in question: .nav li { margin: auto; display: inline-block; color: white; padding: 10px; font ...

center a horizontal line using StyledSheets in your project

After drawing a horizontal line, I noticed that it is positioned towards the left side of the screen. I am hesitant to increase its width. Are there any other methods to move it to the center? I attempted wrapping it with another view and using alignConten ...

Creating a dynamic height sticky sidebar and footer in Bootstrap 5 using CSS/HTML

Looking to implement a sticky sidebar feature with a header and footer that remain visible while the middle content scrolls. The overall height of the page will vary, so I plan to use Bootstrap 5 grid for structuring. <!DOCTYPE html> <html la ...

Guide on transferring values from a Python list to an HTML progress bar

In my application, users can read news items and leave comments. These comments are then analyzed using NLP techniques to classify them as either positive or negative. My goal is to display the percentage of positive and negative comments for each news ite ...

Having trouble getting a styled button to align properly with the text next to it

Usually I wouldn't reach out for help on a minor issue, but I've exhausted all my options. I've spent at least an hour attempting to solve this problem with vertical-align, padding adjustments, and more. It should be a simple fix. http://js ...

Mastering the CSS Art of Working with Sprite Images and Their Positioning

I am currently working on an educational project as a front-end developer, where I aim to clone the Google homepage. To achieve this, I am utilizing Google's own sprite and here is the image of the sprite that I am using. https://i.stack.imgur.com/YT ...

Is it possible to disable a function by clicking on it?

I currently have a website that is utilizing the following plugin: This plugin enables an image to be zoomed in and out through CSS transforms, with default controls for zooming in and out. My goal is to incorporate a reset button that returns the image ...

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

A square containing two triangular interactive zones

My goal is to divide a square-shaped div diagonally, creating two triangles. Each triangle should respond to the hover event. However, I have encountered a problem where if you move from one corner of the div directly to the opposite corner, the hover eve ...

Utilizing Selenium to extract data from a table and displaying the results

I am looking to scrape tables from a specific website, but I am new to automation with Selenium. Here is the code snippet that I have come up with after doing some research: from selenium.webdriver import Firefox from selenium.webdriver.common.by import By ...

Explore Site Configuration

When it comes to creating a responsive site with the given layouts: If you have a fixed header (4rem), how can you set up the main container (C & D) to have a maximum height of 100% and scroll independently based on the overall height of the contents in C ...

Steps for removing the bottom border for the last child in the Material UI Box Component

I have a Box Component where ListItems are wrapped. For each child, I have a border-bottom of 1px solid class set for the Box component, but I don't want it for the last child. How can I achieve that? {data.map((item, i) => { return ...