What causes the ion-fab-button to not remain fixed within the Ionic 4 popover?

I am currently working on an Ionic 4 application and have implemented a popover feature. Within this popover, I want to include an ion-fab-button that should remain fixed in the top-right corner of the popover.

The snippet of HTML code I have written for this is as follows:

<ion-content>
   <ion-fab vertical="top" horizontal="end" slot="fixed">
        <ion-fab-button (click)="getStats()">
            <ion-icon id="closeBTN" name="stats" color="light">
            </ion-icon>
        </ion-fab-button>
   </ion-fab>


   <div>
      ......
   </div>
</ion-content>

Despite my efforts, I have found that the ion-fab-button does not remain fixed as intended but scrolls with the content within the popover. Can someone please advise me on why this might be happening and how I can resolve it?

I have also attempted putting the button inside an ion-header, only to find that the ion-header also scrolled along with the rest of the popover content. Additionally, using CSS styling like position:fixed did not yield the desired result.

If anyone has any insights or suggestions on how to address this issue, your help would be greatly appreciated!

cssangularionic-frameworkpositionpopover

Answer №1

This method worked perfectly for me on 25-02-2021 using Ionic 5

html

 <div class="fixed">

        <ion-fab vertical="top" horizontal="end" edge slot="fixed">
          <ion-fab-button size="small">
            <ion-icon name="camera"></ion-icon>
          </ion-fab-button>
        </ion-fab>

      </div>

css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

Answer №2

Check out this useful link for potential assistance. In my personal experience, I encountered an issue where the fixed property did not function correctly when the ion-fab was positioned within a custom component inside the ion-content.

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 issue of 'position: fixed' not properly functioning within the Materialize CSS modal

My goal is to have the header of the Modal stay fixed while scrolling, but for some reason, the option position:fixed; is not working. I am currently using Materialize CSS to build the modal and surprisingly, position:sticky; is working. $(document).rea ...

javascriptjqueryhtmlcssmaterialize

execute the function once the filereader has completed reading the files

submitTCtoDB(updateTagForm:any){ for(let i=0;i<this.selectedFileList.length;i++){ let file=this.selectedFileList[i]; this.readFile(file, function(selectedFileList) { this.submitTC(updateTagForm,selectedFileList); }); } } } ...

javascriptangulartypescript

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

Configure NODE_OPTIONS to set the maximum old space size for an Angular application to Nx

In my Angular application within an Nx workspace, I am utilizing the @nx/angular:webpack-browser executor for building. "build": { "executor": "@nx/angular:webpack-browser", ... } This is a sizable application that necessita ...

angulardevopsnrwl-nx

Struggling to dynamically create an identifier and data-bs-target, but experiencing difficulty in doing so

<ul> <li data-info="Amount in (₹)">{{depositeAmt}}</li> <li data-info="Status"> <button class="statusbtn Process" data-bs-toggle="collapse" data-bs-target="#colla ...

htmlangularbootstrap-5angular10

Creating a basic popup with jQuery: A step-by-step guide

Currently in the process of creating a webpage. Wondering how to create a popup window with an email label and text box when clicking on the mail div? ...

javascriptjquerycssajaxpopup

Struggling with loading partials in Sails.JS from the "assets" directory?

I am currently using Sails.JS as the backend paired with Angular 6 for the frontend of my application. Within my homepage.ejs file, I am trying to load HTML content from the assets folder: <!DOCTYPE html> <html> <!-- webpack generated ht ...

node.jsangularsails.js

Using CSS3 to apply transformations to multiple divs based on their individual attributes

I am currently developing JavaScript code that will enable the use of HTML like the example below: <div class="box" data-vert-speed="7">ContentDiv1</div> <div class="box" data-hori-speed="10">ContentDiv2</div> <di ...

javascripthtmlcssscrolltransform

Select the input element in CSS that does not have a parent with the class name 'classname'

In my stylesheet, I have a specific rule that styles various input fields and select elements. However, I'm facing an issue where this styling is being applied to all text fields on the page, including ones inside certain elements with a specific clas ...

csscss-selectors

What is the best positioning option to choose: "Relative? Static, or something else?"

I decided not to use float for positioning my divs in CSS; instead, I used the position property with relative value. However, when viewing the site on different screen resolutions, all the divs end up getting jumbled. Can someone please explain what I m ...

htmlcsscss-position

Navigate to the first item on the menu in the Chrome browser

Why does the First Menu Item (.chosen) jump in Chrome Browser when refreshed? It seems like it's changing the Padding-Right and Padding-Bottom. Please review the code and help me solve this irritating issue. It works fine in Firefox. <body> ...

jqueryhtmlcss

Mapping the server's response for errors and success: a step-by-step guide

I am working on creating a custom validator for my Angular 9 application. Here is the validator method I have written: public static validateName(service: MyService): AsyncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors ...

angular

Is it possible to utilize the same module.css file across multiple components in a React project?

As a newcomer to React, I have discovered the benefits of using module CSS to address naming conflicts. Now, as I prepare to refactor my app, I have encountered a scenario where two components are utilizing styles from the same file. I am curious to lear ...

javascriptcssreactjscss-in-js

Having trouble displaying a gray background/overlay in a Twitter Bootstrap modal design

Library version: Jquery 1.11.0 Framework version: Bootstrap 3.1.1 CodePen link: https://codepen.io/amitshahc/pen/r6ueupfj/1/ HTML snippet: <!-- Modal --> <div class="modal fade" id="az-progress" tabindex="-1" role="dialog" aria-labelledby= ...

jqueryhtmlcsstwitter-bootstrapbootstrap-modal

The ActivatedRoute snapshot does not function properly when used in the TypeScript class constructor

Currently, I am encountering a challenge with TypeScript and Angular 2. The structure of my TS class is as follows: 'import { Component, OnInit } from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @Component({ ...

angulartypescriptangular2-routing

Issue with iOS iframe scrolling - unable to scroll as expected

On iOS devices like the iPad and iPhone 6, scrolling doesn't seem to work as intended. Instead of the iframe scrolling, it's the 'body' that is moving. Javascript $(document).on(clickHandler, '#content a', function(){ href ...

javascriptjqueryhtmlcssiframe

Tips for concealing material input

In my usual practice, when I need a form field to be part of the submission but not visible, I typically use <input type="hidden" /> However, when working with matInput, the option for a type of hidden is not available. While I could apply display: ...

angulartypescriptangular-material

bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout. The problem arises when half of the popup extends beyond the edge of the pa ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

The CSS styling is not taking effect

I'm having trouble with my CSS changes not appearing on the webpage, and I can't seem to figure out why. Specifically, I'm attempting to modify the font, which has previously worked but is now not taking effect. Both my CSS and HTML files ar ...

htmlcsstwitter-bootstrap

The hyperlink function is malfunctioning when used with the embed tag in both Internet Explorer and Chrome browsers

<param id="movie" name="movie" value='<%= Me.ResolveUrl(Me.BannerPath)%>'> <a href='http://<%= BannerTargetUrl%>' target="_blank"> <embed wmode="transparent" src='<%= Me.ResolveUrl( ...

csshtmlhyperlinkcross-browser