Changing text inside ion-header-bar directive

When utilizing the ion-header-bar directive, I have the left side designated as class="button", the middle section containing <h1> with the word "Recent", and the right side as <ng-icon>.

The text on the left side is dynamically generated using i18, causing the middle section to shift right (it works well when the left side is set as constant text).

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
    <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}
    </a>
    <h1 class="title">Recent</h1>
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
</ion-header-bar>

When it works well -

https://i.sstatic.net/tfDc2.jpg

When it doesn't work well -

https://i.sstatic.net/Ewzm8.jpg

How can I resolve this issue with dynamic text included?

javascriptangularjsionic-framework

Answer №1

Place the following code snippet in the header section while enclosing the left and right buttons or icons.

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
  <div class="buttons">
      <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}</a> 
  </div>
  <h1 class="title">Recent</h1>
  <div class="buttons">
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
  </div>
</ion-header-bar>

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

Use regular expressions to locate all closing HTML tags and all opening HTML tags individually

My JavaScript function is currently filtering strings by removing all HTML tags. However, I have now realized that I need to perform two separate operations: first, replacing all closing tags with <br>, and then removing all opening tags. return Str ...

javascriptregex

Issue Encountered While Trying to Load Images on Local Host Test Server

I have encountered a strange issue that I can't seem to explain. Currently, I am developing an AngularJS website for my family that includes integration of data from different web services. One section of the site involves fetching photos from our Fl ...

htmlimagenode.jsapacheangularjs

What is the best way to retrieve an input value within a controller?

I am attempting to create a live search feature for an app. I have implemented an ng change function that logs the input (ng model searchLive) and triggers a reload of the http request. However, the $scope.searchlive returns undefined even though the ng ch ...

angularjshttpsearch

Navigation bar in reactjs remains visible even after clicking on an icon button, causing a temporary issue with

I'm facing an issue with my navigation bar created using material-ui. I have an onClick function set up so that when the user clicks the icon button, the navigation redirects to a new page and then should close. However, no matter what I try, the navi ...

javascriptreactjsmaterial-uijsx

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

javascriptjqueryhtmlcss

Unable to transfer files, encountering issues with PHP and AngularJS integration

I am currently working on uploading files using both AngularJS and PHP. For the AngularJS part, I am utilizing angular-file-upload from https://github.com/danialfarid/angular-file-upload. I suspect that the issue lies in my PHP code, as it fails to move ...

javascriptphpangularjs

Deleting JSON files using Discord and Node.js by requiring them from a specific folder

Currently, I am in the process of developing a Discord bot using Node.js. One of the functions within the bot utilizes JSON files to store information about specific entities. I aim to create a command in Discord that, when called with a specific name asso ...

javascriptnode.jsjsondiscord

Tips for executing a <script> whenever the properties of a component are modified

Can I automatically run a <Script/> every time the props of a react/nextjs component change? I'm currently converting markdown files to HTML using marked and, before rendering the HTML, I want to include a [copy] button on each <pre> bloc ...

javascriptreactjsnext.js

The functionality of the web application is not supported in Multi-Device-Hybrid-Apps format

I am encountering an issue with my app that functions perfectly as a typical web app, but fails to work properly when converted into a Multi-Device-Hybrid-App format. The problematic sections are indicated in a screenshot of the app. Below is my complete c ...

javascriptangularjsripplevisual-studio-cordova

Tips for checking the validity of PHP variable names, such as $as['abc'], within an HTML textbox

Can anyone assist me with validating a user input PHP variable name such as $as_cap['abc'] during insertion? I need to verify if the format of the variable name is correct or incorrect. Currently, I am using eregi("^[a-z0-9_.'-]{1,50}$") ...

phpjavascriptvalidation

Inspection Techniques for Javascript Objects

Is there a way to display an object's properties and methods in an alert box? When I try alerting an object, it only shows the nodename: alert(document); I'm looking for a way to see all the details of the object in the alert message. Is there ...

javascriptobjectinspect

Remove all spaces from input fields in angular Typescript, excluding the enter key

I've encountered an issue where the code below removes all spaces, but it's also removing the enter key. Is there a way to remove only spaces and not affect the enter key? static stripDoubleSpaces(str: string): string { if (!!str) { ...

javascriptangulartypescript

What are some methods for controlling a webpage? Is it through HTML, JavaScript, Xpath, or

Hey there, I could really use your expertise on untangling a question that has me completely stumped. What exactly is the mechanism for controlling a webpage? a. HTML b. JavaScript c. Xpath d. CSS ...

javascriptseleniumhtml

Execute function when button is clicked in ExpressJS

I am looking to execute a function on my node server when a button on my website is clicked: What I currently have: Index.html (I have not included the entire content for simplicity) <button id="tv">tv</button> Client.js (Client side) const ...

javascriptnode.jsexpresslistener

Error occurred during the parsing of an AJAX response

Hello, I am currently exploring the world of JavaScript and jQuery. I recently encountered a situation where I initiated an AJAX call in my code and received an unexpected response. https://i.sstatic.net/AUHb7.png My current challenge revolves around imp ...

javascriptjqueryjsonajax

Referencing an object by using a variable containing its name

I need a way to reference an object using a variable with its name in it. I've figured out how to do this for properties and sub-properties: var req = {body: {jobID: 12}}; console.log(req.body.jobID); //12 var subProperty = "jobID"; cons ...

javascriptnode.js

for each and every object, execute the asynchronous function

I have a scenario where I need to loop through objects, call an async method ("search") with a callback, and then write the results (resultSet) to a JSON file once all objects are processed. The issue I'm facing is that the writeFile function is execu ...

javascriptnode.jsasynchronousexpress

Using window.print as a direct jQuery callback is considered an illegal invocation

Curious about the behavior when using Chrome $(selector).click(window.print) results in an 'illegal invocation' error $(selector).click(function() { window.print(); }), on the other hand, works without any issues To see a demo, visit http://js ...

javascriptjquery

Unable to fulfill all the promises in JavaScript

As I develop a filter feature, I have categories and cities in the format: ['New York'], ['Cars']. The goal is to iterate through them to retrieve products based on each city or category. My approach involves storing these products in t ...

javascript

Seeking a sleeker approach to composing various components with shared functions

Currently, I have a scenario where I have identical components that display data but also need to handle state manipulation and saving. There are 5 other similar components with slight differences in their functions. I am looking for a more efficient way t ...

javascriptreactjsfunctionmaterial-uihigher-order-components