Creating a fixed top bar button in Ionic and iOS along with a scrollable list

In my app using Ionic with the iOS platform, I am trying to achieve a specific layout:

  • A header
  • A fixed bar button
  • A scrollable list

Here is what I have attempted so far:

<ion-view view-title="Account">
   <div class="button-bar" style="margin-top:66px;">
        <a class="button">Item 1</a>
        <a class="button">Item 2</a>
        <a class="button">Item 3</a>
    </div>
 ...

However, when I run ionic emulate ios, the bar button does not appear in the iPhone simulator (possibly due to being behind the header bar).

To address this, I tried adding a margin-top:

<div class="button-bar" style="margin-top:44px;">

Now the button is visible, but a part of the header bar still overlaps it. Could this be related to the status bar? What is the combined height of the status bar and header bar on an iOS device?

Additionally, to make only the list scrollable, should I add a <ion-content> after the button-bar div?

ioscssionic-framework

Answer №1

Creating a Button Bar in HTML and CSS

<div class="button-bar" style="margin-top:66px;">
    <a class="button">Item 1</a>
    <a class="button">Item 2</a>
    <a class="button">Item 3</a>
</div>

Styling with CSS

.button-bar
    {
      float:left;
      overflow-Y:scroll;
      height:50px; 
      width:150px;
    }
.button
    {
      float:left;
      width:100%;
    }

Check out this Fiddle to see the result and try scrolling through your items.

To ensure clarity and visualization, apply float:left; and display:block; to each element.

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

Alignment of button within bootstrap column is skewed when screen size is reduced

My button is perfectly centered in one of my bootstrap columns, but things start to get messy when the screen size shrinks and the button overlaps with another column containing text. Adjusting the margins only seems to make things weirder. .center-btn- ...

htmlcsstwitter-bootstrap

The accordion won't function properly if it is added using append() after the document is ready

I have implemented a button to add an accordion, but unfortunately it doesn't seem to be working properly. I am unsure of how to troubleshoot and resolve this issue. If the accordion HTML is appended after the document.ready() function, then the accor ...

jqueryhtmlcss

A guide on applying bold formatting to a specific section of text in React

I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...

javascriptcssreactjs

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

I’ve attempted the following so far: import "./styles.css"; import { Box, Typography } from "@mui/material"; import styled from "@emotion/styled"; export default function App() { const MainStyle = styled("div")(( ...

cssmaterial-ui

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Remove the active class after it has been clicked for the second time

Currently, I am working on a menu/submenu system where I want to toggle active classes when clicked. However, I encountered an issue - if the same menu item is clicked twice, I need to remove the active class. Initially, I tried using jQuery's toggleC ...

javascriptjquerycss

Stacking elements in perfect alignment

Seeking assistance with React/MUI as a newcomer. I am utilizing a Stack of TextFields, which are resizing effectively based on screen width. <Stack direction="row" sx={{ margin: "16px" }} > ...

cssreactjsmaterial-ui

Having trouble with prettyphoto functionality

Seeking assistance as I am struggling to get this working Here is how I have set it up: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/ ...

javascriptjquerycss

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...

htmlcsscross-browserinternet-explorer-9css-selectors

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

htmlcsswordpresshover

Is there a bug with the CSS Safari selector for elements focused together?

Looking for a solution using the element+element-Selector to modify CSS for an element following a button. This code snippet functions in Chrome, Edge, and Firefox but not Safari on MacOS: .button:focus+.change{ color: red; } <p>When you focus ...

csssafaricss-selectorsfocus

The browser has disregarded a CSS rule

Hey there, I have a question that may seem silly, but I just can't seem to find the answer anywhere. Please take a look at this fiddle: I need to remove #Navigation in the CSS declaration below: #Navigation .stretch { ... } so it should look like ...

cssbrowser

Alignment of Nested Accordions using BootStrap: Right Justified

I have a nested accordion that resembles the following structure: https://i.sstatic.net/HT6kS.png However, I am seeking to align them to the right so that all collapse arrows are in line. In my Plotly Dash implementation, the code looks like this: d = {& ...

cssaccordionplotly-dashbootstrap-5bootstrap-accordion

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access. I am creating a 'Learn More' button that should display a collapsed unordered list either above ...

javascripthtmlcsstwitter-bootstrap

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

phpjquerymysqlangularjscss

The presence of text is leading to CSS placement troubles

I operate a website dedicated to comic content and am looking to incorporate text (retrieved from the database field "description") beneath each comic thumbnail. Here are my two inquiries: 1) I'm facing an issue where adding text below a comic caus ...

phpcss

The unresponsive sticky navigation bar on a Joomla website is causing issues

I recently launched a new website that can be found here. The site includes the following JavaScript code: $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; ...

javascriptcssjoomlamenusticky

Is it advisable to keep PHP files in the project directory?

Trying to figure out the best way to phrase this question, but here goes nothing. I am currently utilizing PHP files to access data from a MYSQL database. In Xcode, I utilize NSJSONSerialization to retrieve the information. The PHP files must be located on ...

phpmysqlios