Is there a way to create a new perspective for Ion-Popover?

Looking for a solution:

<ion-grid *ngIf="headerService.showSearch()">
            <ion-row id="searchbar" class="main-searchbar ion-align-items-center">
              <ion-col size="11">
                <ion-searchbar class="custom" placeholder="Buscar entre mis productos" type="text"
                  showClearButton="never" id="searchInput" #searchBar (ionInput)="headerService.onSearchInput($event)"
                  (keyup.enter)="headerService.onEnterPress($event)"></ion-searchbar>
              </ion-col>
              <ion-col size="1" id="trigger-filter">
                <svg xmlns="" width="20" height="20" fill="#808080"
                  class="bi bi-funnel-fill ion-float-right" viewBox="0 0 16 16">
                  <path
                    d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z" />
                </svg>
              </ion-col>
              <app-search-popover></app-search-popover>
            </ion-row>
          </ion-grid>

The current setup triggers the popover below the ion-col element, but I want it to open in alignment with the entire ion-grid container. Is there a way to achieve this?

Here's the code for the popover:

<ion-popover trigger="trigger-filter" triggerAction="click" interface="popover" side="bottom" size="auto"
    [dismissOnSelect]="false" class="custom-popover" show-backdrop="false">
    <ng-template class="content-popover">
        <ion-grid>
            // Popover content here...
        </ion-grid>
    </ng-template>
</ion-popover>
htmlcssangularionic-framework

Answer №1

When it comes to displaying a popover in Ionic Framework, a reference point is crucial for positioning the popover accurately. By using the reference attribute as "event", the popover will show up based on the x-y coordinates of the pointer event that occurred on your trigger element. On the other hand, selecting "trigger" as the reference will make the popover appear relative to the bounding box of your trigger element.

For more information on popover positioning, visit here

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 can Angular be used to dynamically show or hide an element based on its height?

Is there a way in Angular to display a "Read More" link once the height of a paragraph reaches 200px? I'm looking for an elegant solution. Here are my elements: <section class="mynotes" ng-if="MyController.mynotes"> <p ng-bind="MyController ...

javascripthtmlcssangularjs

Angular 2 Route offers a blueprint for creating a Component template

Is it possible to assign a specific template to a component within a route in Angular 2? I am working on a component that has the same controller functionality across three different views. My goal is to use the same component for all three views, but wit ...

angularangular2-routingangular2-templateangular2-components

My Javascript file is not being recognized by MVC

Initially, I created an MVC application without fully understanding that MVC is more backend-oriented than frontend-focused. I ended up building a simple website with just HTML, CSS, and Javascript files, which worked perfectly. However, when I tried to in ...

javascriptjqueryhtmlcssasp.net-mvc

I'm facing issues with Angular commands not functioning properly even after installing the Angular CLI and configuring the

Every time I attempt to create a new project using Angular CLI by typing: ng n app I encounter the following error message: C:\Users\Venkateshwarn M\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng: ...

javascriptnode.jsangularmongodbexpress

Extracting information from an ENORMOUS Array

Let's start with my code snippet, featuring an array: var UserProfiles = [{ userProfileID: 1, firstName: 'Austin', lastName: 'Hunter', email: 'test', token: '', platform: 'android ...

javascripthtmlangularjsarrays

I'm having trouble retrieving my variable within the socketcluster's socket.on function

How can I store the value of msg in the variable sample when sample is not accessible inside the callback function? import { Injectable } from '@angular/core'; import * as socketCluster from 'socketcluster-client'; @Injectable({ pro ...

javascriptangulartypescriptsocketcluster

Challenges encountered while constructing a flexbox layout

I have a flexbox design that I am trying to create with the specific layout shown in the image: https://i.sstatic.net/Sy20K.jpg My HTML code is as follows (and I do not want to make any changes to it): <div class="wrapper"> <div class="page-h ...

htmlcssflexboxcss-grid

Accessing user information after logging in can be achieved through utilizing Web API in conjunction with Angular 5 Token Authentication

Every time I access my Angular app, the following information is displayed: access_token:"******************" expires_in:59 refresh_token:"******************" token_type:"bearer" However, I am now facing an issue where I cannot extract the user id from t ...

c#angularauthenticationasp.net-web-apitoken

Unable to display <div> elements from CSS within the Wordpress Text Widget

Having trouble displaying a <div> from CSS in a Text Widget on Wordpress. <div class=”deffgall-cutlure” ></div> style.css .deffgall-cutlure { display:block; position:relative; width:100px; height:100px; backgrou ...

csswordpress

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

I have a JavaScript code that works well when the hyperlink below is clicked: <a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a> <script> function ConfirmDelete() { var ans ...

javascriptjqueryhtmlbuttonhyperlink

Ignored are the white spaces within a pre tag

From what I understand, the 'pre' tag is supposed to collapse all white spaces and tabs into one space. However, I have noticed that this doesn't happen for me. I'm curious as to why this may be the case. Could it possibly be dependent ...

htmlwhitespacepre

I'm currently in the process of creating a snake game using HTML5. Can you help me identify any issues or problems that

I am experiencing an issue where nothing is appearing on the screen. Below are the contents of my index.html file: <html> <body> <canvas id="canvas" width="480" height="480" style="background-color:grey;"></canvas> <script src=" ...

javascripthtml

Update a JQuery function for an input field following an innerHTML command

Using JQuery to check the file size and name from an html file input field can be a useful tool. The input field in question looks like this: <div id="uploadFile_div"> <input name="source" id="imageFile" type="file" style ="border: 1px solid ...

javascriptjqueryhtmlforms

Can a form component be recycled through the use of inheritance?

Greetings to the Stackoverflow Community, As I delve into this question, I realize that examples on this topic are scarce. Before diving into specifics, let me outline my strategy. I currently have three pages with numerous FormGroups that overlap signif ...

angularformstypescript

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular

What is the best way to horizontally align an element within a Material UI Grid item?

How do I align elements in the center of a Material UI Grid item? Check out this code snippet from my React project: <Grid container> <Grid item xs={4}> // Other content goes here </Grid> <Grid item xs={4}> // How can ...

cssreactjsmaterial-ui

Bottom section goes haywire in Chrome when clearfix is applied to a div above

When I remove the clearfix div above the footer, the text aligns correctly on Firefox. However, this causes issues with other elements on the page. It's puzzling how the clearfix is impacting the footer in this way... Here is a link to my page: ...

cssfooterclearfix

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

I've implemented a JavaScript function that triggers a pop-up alert whenever a user attempts to navigate away from the site by clicking on an external link: $("a[target='_blank']").click( function() { return confirm('Please don&apo ...

javascriptjqueryhtmlcss