tips for aligning the bar in Ion-toolbar

I've exhausted all options in trying to center the bar in ionic, but nothing seems to be working. Can anyone provide a solution?
I want the bar to stay in the middle so that it remains centered when the application is downloaded on different devices.

.searchbar{
  width: 352px;
  height: 42px;
  background: #C2C3C8;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 90px;
  //position
  position:sticky;
  margin-top: 10px;
}

.morepagebutton{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F69E7B;
  box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25);
  //button position
  position: absolute;
  margin-left: 312px;
  margin-top: 3px;

  //vector size & position
  font-size: 29px;
  padding: 1px;
}

ion-toolbar {
  --background: #383E56;
  height: 77px;
  width: 500px;
}
<ion-footer>
  <ion-toolbar>

    <div class="searchbar">

      <button class="morepagebutton" (click)="toMorePage()">
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </button>

    </div>

  </ion-toolbar>
</ion-footer>

htmlcssangularionic-framework

Answer №1

It is not advisable to use fixed width values, but you can utilize flexbox for this purpose:

.searchbar {
    width: 352px;
    height: 42px;
    background: #C2C3C8;
    box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 25%);
    border-radius: 30px;
    -webkit-position: sticky;
    position: sticky;
    display: flex;
    justify-content: end;
    padding: 3px 6px;
    margin: auto;
}

.morepagebutton{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F69E7B;
  box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 25%);
  font-size: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-toolbar {
  --background: #383E56;
  height: 77px;
}

ion-footer ion-toolbar:last-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
}

<ion-footer>
  <ion-toolbar>

    <div class="searchbar">

      <button class="morepagebutton" (click)="toMorePage()">
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </button>

    </div>

  </ion-toolbar>
</ion-footer>

Answer №2

To align the ion-toolbar at the center of the screen, you can convert it into a grid and utilize the justify-content property for positioning. The reason why the toolbar is not centered is due to the width specified for the ion-toolbar.

.searchbar {
  width: 352px;
  height: 42px;
  background: #C2C3C8;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 90px;
  //position
  position: sticky;
  margin-top: 10px;
}

.morepagebutton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F69E7B;
  box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25);
  //button position
  position: absolute;
  margin-left: 312px;
  margin-top: 3px;
  //vector size & position
  font-size: 29px;
  padding: 1px;
}

ion-toolbar {
  --background: #383E56;
  height: 77px;
  width: 500px;
  /* Added */
  display: grid;
  justify-content: center;
}
<ion-footer>
  <ion-toolbar>
    <div class="searchbar">
      <button class="morepagebutton" (click)="toMorePage()">
        <ion-icon name="ellipsis-horizontal"></ion-icon>
      </button>
    </div>
  </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

Tips for showing an image in a pop-up window using Window.open

I'm attempting to show an image in a popup window using the following JavaScript code: function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=no,t ...

phphtmlwindow.open

Troubleshooting Problem in Angular 6: Difficulty in presenting data using *ngFor directive (data remains invisible)

I came across a dataset that resembles the following: https://i.sstatic.net/S0YyO.png Within my app.component.html, I have written this code snippet: <ul> <li *ngFor="let data of myData">{{data.id}}</li> </ul> However, when I ...

angulartypescriptangular6

Tips for ensuring the footer remains fixed at the bottom while maintaining a 100% background display

Having trouble getting my footer to stay at the bottom of my webpage. I suspect that the issue may be related to my background image being set to 100%. Any tips on how to keep the footer glued to the bottom would be greatly appreciated. Thanks! ...

csshtmlbackgroundfootersticky-footer

Tips for configuring an image with CSS (background-image property)?

Can someone provide guidance on setting a background image in CSS using the background-image property? I am experiencing an issue where the image is not displaying in the browser. I have specified the file path to my desktop, but even after using '.. ...

csswebgoogle-web-designer

Eliminate the gaps within the spans

Is there a way to create a tab bar using HTML that adjusts the width of each tab based on the text length and wraps the text if it exceeds the screen width? I've made progress in achieving this design, but I'm facing an issue with a persistent s ...

htmlcsspadding

Radio buttons failing to submit

$(".dist_radio").click(function(event) { event.preventDefault(); $(".dist_radio").removeClass('dist_on'); $(".dist_radio").children('input').attr('checked', false); $(this).addClass('dist_o ...

javascriptphpjqueryhtmlforms

What causes the double click on the button?

<div class="btn-group btn-group-toggle button-div" data-toggle="buttons"> <label class="btn btn-secondary" onclick="alert('option1');"> <input type="radio" name="op ...

htmlbootstrap-5

Validating email addresses and confirming their existence with the help of ko.observable

Currently, I am working on applying validations to emails to determine if they are valid or not using JavaScript. Additionally, I want to check in the database via AJAX to verify if the email already exists. The challenge I am facing is how to ensure the e ...

javascripthtmljqueryvalidationknockout.js

Preventing CSS elements from shifting during transitions

Whenever I apply a Transition to a CSS element, the content below it shifts. Here's an example on JSFiddle: http://jsfiddle.net/pgdxd7su/ (Please refer to the JSFiddle link as the code snippet may not work correctly). h1{ font-size } h1:hover{ ...

htmlcsstransition

Ways to send a POST variable to PHP without refreshing the webpage

Is there a way to pass a simple variable from a text-box on a different page to PHP without reloading it? I've been informed that Ajax is required for this task, but I'm unsure of how to go about implementing it. Can someone provide me with a sam ...

phpjavascripthtmlajax

Is it possible for the browser to ignore the style.min.css file and only use the style.css file when both files are linked in the HTML?

I have a question about file downloads: If I have two files named Style.css and Style.min.css in the same directory, and my HTML page references Style.css, will the browser or server ever download the Style.min.css file instead? (Even if they have the sa ...

cssminify

CSS class for modifying color based on certain conditions

Suppose I have this CSS code: label { color: #AAAAAA; } Can I modify it to include a condition that changes the color to red if the label has the "error" class? I am aware that I can dynamically add the class to the label in HTML, but I am curious if ...

htmlcss

Directive in Angular 2 fails to run

My task is to create clickable URLs within text inside a div element using Angular 2. To achieve this, I have started learning how to use directives and the linkifyjs module. This is the LinkifyDirective I created: import { Directive, ElementRef } from & ...

angular

What is the best way to prevent the destruction of tab components in Angular?

Hello, I am looking for a solution on how to avoid destroying tab components as shown in the image. I am working on creating a tab-like system for performance reasons, but I only want to destroy tabs when they are not in use. When I switch tabs, I don&apos ...

angulartabscomponents

Easy jQuery image that smoothly fades in and out

Can anyone recommend a script that allows for creating a slideshow where images fade in and out, rather than sliding left and right? I have a list of images below that I would like to use for the slideshow. <ul class="slideshow"> <li><im ...

jquerycssimagefadeoutfadein

What is the process for showcasing a local notification within my application?

Here is the code snippet I am working with: import { LocalNotifications } from '@ionic-native/local-notifications'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scs ...

javascriptangularionic4

PHP sending only a single space in an email

My HTML form works perfectly fine, except for one field! The issue arises with a particular text field that I fill out using a button and a short JavaScript function. Could this be causing a conflict with the PHP code? The problematic text field is: inpu ...

javascriptphphtml

Differences in font sizes across various browsers on Mac devices

In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul. The problem arises when viewing the navig ...

htmlcssmacosfonts

Creating aesthetically pleasing and flexible rows with left-floated div elements of varying heights

I need to arrange a series of elements in rows that look like tables, with fixed width but variable height determined by the content. Each element is set to float left and have the same width value. The issue I'm facing is that sometimes the elements ...

htmljquerycsscss-float

What is the process for sending requests with a delay?

I need help implementing a delay in my code for sending requests to a server. I want to send a request every 3 seconds and stop once all requests have been processed. Can someone guide me on how to achieve this? public element: any; const elements = []; ...

angularrxjs