Scrolling within ion-content is fluid when using a fixed div in Ionic

Following the recent GoogleChrome update, a div set to 'fixed' is now scrolling with the rest of the page.

For a demonstration, you can visit the following link: LINK

Specifically, the issue occurs with a 'fixed' div placed inside the 'ion-content' section.

Interestingly, if a simple div like the one below is placed inside 'ion-content', it does not maintain its fixed position. However, when moved outside 'ion-content', it remains fixed!

<div style="width: 100px;height: 100px;position: fixed; left: 0; bottom: 0px; z-index: 500; background-color: blue;"></div>

Is there a way to keep it fixed within the ion-content?

Any assistance on this matter would be greatly appreciated!

For reference, I am working with Ionic 3 (version 3.20.0)

htmlcssgoogle-chromeionic-frameworkionic3

Answer №1

If you're looking to enhance your Header or Footer, consider using the ion-toolbar element. Here's a sample code snippet showcasing how it can be utilized (demoed on stackbliz): 

<ion-header>
  <ion-toolbar>
    <ion-title>My Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>

  <p>
    (Additional content edited for brevity)
  </p>

</ion-content>

<ion-footer no-border>

  <ion-toolbar>
    <ion-title>I'm a footer</ion-title>
  </ion-toolbar>

</ion-footer>

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 button remains in a pressed state when viewed on a mobile device

This button is functioning properly in desktop view, but in mobile view the button remains pressed down. :root { --green: #4285f4; --black: rgba(9, 13, 25, 0.752); --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff; --box-shadow-inset: ...

htmlcss

Having difficulty resolving issues with the chat box (div) scroll bar staying fixed at the bottom

I am currently working on a chat application and I am facing an issue with fixing the scroll bar at the bottom of a div when loading my PHP file. I have already written a script to achieve this, but despite accessing it using CSS Id, I am having trouble ge ...

javascriptphpjqueryhtmlcss

Evaluate the user's answers to a database using a SQLite 3 C++ Quiz

Currently, I am in the process of writing a C++ program that utilizes SQLite. The main aim is to enable users to specify their preferred hotel room options. Subsequently, the program compares these user selections with the information stored in a database. ...

htmlc++sqlite

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

cssangularionic-framework

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascriptjqueryhtmlcss

Confirming class Value with Selenium IDE

I am looking to confirm the value of a specific class within an HTML code using Selenium IDE. Specifically, I want to retrieve the value of: data-val located under the class named tgl. In my example, this value can be either 0 or 1. How can I achieve thi ...

cssclassseleniumxpathselenium-ide

Is it possible to combine the :last-child pseudo-class with the universal selector (*) in CSS or Sass

Here is the code I am currently using: .loken5 * padding-right: 5px .loken5:last-child padding: 0 I am wondering if there is a way in SASS to achieve the same effect with just one '.loken5' tag for saving space. Thank you :) ...

csssass

Manipulate the CSS of a single div within a group of divs that have the same class using jQuery

I'm attempting to modify the CSS of a specific DIV that shares its class with other divs. I've searched for a solution but haven't had any luck so far. Here is the code I've been using without success: $(".singleOffer").click(functio ...

javascriptjqueryhtmlcss

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

Enhancing the readability of modals with Angular Dialog Service

I have been utilizing the Angular Dialog Service to create popup forms on my website. The source code for this service can be accessed here: https://github.com/m-e-conroy/angular-dialog-service/blob/master/README.md However, I am experiencing an issue wit ...

javascripthtmlangularjsmodal-dialog

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

https://i.sstatic.net/A1eUh.png I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already ...

javascriptjqueryhtmlcss

Generate an image, PDF, or screenshot of a webpage with the click of a button

I've been searching for a solution that would enable users to click a button and save an image or PDF of the current page. The content on the page is dynamic and dependent on user input, resulting in sequences displayed in various colors. I'm loo ...

phpjavascriptjqueryhtmlajax

Tips for including a hyperlink in a collapsible element within a dropdown menu using Bootstrap 5

Is there a way to add a link to "Home" and "Pages" that will collapse and show the list items below when clicked? I tried changing "#homeSubmenu" from a link to a href, but it does not collapse when clicked. <div class="wrapper"> & ...

cssdropdownbootstrap-5

Stretch the div to the right and maintain its horizontal width

I am in the process of coding a two-column layout, with a total width of 980px. Each column will have a background that expands all the way to the left and right sides as shown in the screenshot here. On the left side, there is a blue div with a width of ...

css

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

Whenever I resize my webpage browser, the 3 text input boxes move and overlap, causing the page layout to become messy. View of The Browser in full screen (normal) View of The Browser when it's smaller (not normal) As a beginner programmer, I have ...

htmlcssformatting

retrieving data from a node and embedding it into an HTML file

In my project, I have an index.html file and an app.js nodejs file. Within the app.js file, there is a variable named "name" that I would like to display in my index.html page. Here is the code snippet: var name = "Utsav"; var HTTP = require('HTTP&a ...

javascripthtmlnode.jsserverserver-side

Modify the font style of the jQuery autocomplete box to customize the text appearance

Hello, I'm a beginner with jquery and currently experimenting with the autocomplete feature. I managed to change the font of the dropdown list successfully but struggling to do the same for the input field itself. Does anyone know how to achieve this ...

javascriptjqueryhtmlcssfonts

Search a location database using the user's current coordinates

Currently, I am working on a project that involves a database containing locations specified by longitude and latitude. Upon loading the index page, my goal is to fetch the user's location and then identify every point within a certain distance radius ...

javascriptpythonmysqlhtmlgeolocation

Hiding a Blogger section when its widget is not visible

Take a look at this code: <b:section id='page-list'> <b:widget id='PageList1' locked='false' type='PageList' version='2' visible='true'> </b:widget> </b:section> I wa ...

javascripthtmljqueryblogger

Eliminating padding or margin for figures in Bootstrap on smaller screens

I've been struggling to create a fullscreen image on small devices without any margin or padding. Unfortunately, the solutions suggested in this thread didn't work for me. Below is the code I'm currently using (tested on https://jsfiddle.n ...

htmlcssbootstrap-4