Using SCSS and HTML to create stylish designs in Ionic 4

I am currently in the process of migrating source code from ionic3 to ionic4. The invocation of text-center in HTML is producing an error due to changes made in Ionic4.

[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
Replace:
'<p text-center>'

With:
'<p class="ion-text-center">'


How can I update the following code for use in ionic4?
Your assistance would be greatly appreciated.

Written for ionic3

html

<p class="txt_login" text-center (click)="Login()">LOGIN</p>

scss

.txt_login{
    color:white;
    font-size: 10.5rem;
}


Answer №1

To apply both class names, include them both in the class attribute

<p class="txt_login ion-text-center" (click)="Login()">LOGIN</p>

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

Firefox is prompting mp3 files to download instead of automatically opening them in the music player

Could someone help me with an issue I'm facing? I have a link to an mp3 file and I've tried various solutions, but they only seem to work on Chrome and Safari (I haven't tested Internet Explorer). My goal is to get it to work in Firefox. ...

What causes the button to move down when adjusting the font in a textarea?

I'm intrigued by the reasons behind this css snippet: select, input, textarea, button { font:99% sans-serif; } that causes the 'submit' button to be pushed below the textarea and positioned at the bottom left corner on this particular ...

Guide on implementing automatic callbacks with AJAX

I am facing an issue with my index page that has one input tag and one division. There is an ajax function that retrieves data from the server, but I am encountering a problem. When I enter a single letter, it returns 3 records. Then, if I add another lett ...

Error: Angular is unable to process the subscribe property because it is undefined

I keep encountering a peculiar error that reads "cannot read subscribe of undefined". Interestingly, this error only seems to occur sporadically when the code is run on its own, but almost always arises during testing without focus. I'm at a loss as t ...

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content. How can I achieve a 30px space between the ...

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

What is the best way to assign string values from an array in data() to the src attribute of an image element?

I've been working on a feature where the <div.box> element appears based on the user's input through a form. In this project, I'm using vue3 and v-for to iterate over an array 'images' that contains URL strings linking to ima ...

scrolling element resembling an iPad

Currently in search of a css/js component that resembles iscroll, but one that is compatible with non-webkit browsers as well. To elaborate, I am in need of the following features: Sleek scrollbar Scrollbar that only appears on drag and/or hover Abilit ...

Place the menu within the image, positioned at the bottom

Could someone help me with placing a menu at the bottom of an image using HTML, CSS and Bootstrap 4? I have limited CSS knowledge and need assistance. Currently, my navbar is located below the image but not within it like this: I am looking to achieve so ...

Managing an exception for the second time

In my project, I recently extended the ExceptionHandler class in Angular: import {Injectable, ExceptionHandler} from '@angular/core'; export class FirstError extends Error { handle() { console.log("This is firstError handler"); ...

How to use RxJs BehaviorSubject in an Angular Interceptor to receive incoming data

Being a newcomer to rxjs, I grasp most operators except for the specific use case involving BehaviorSubject, filter, and take. I am working on renewing an oauth access and refresh token pair within an Angular interceptor. While reviewing various codes fro ...

Having trouble customizing a particular view within Angular

I am struggling to customize the background of a specific view in Angular. When I tried to style it with the code below, the entire view disappeared. Here is the relevant code: HTML (index.html): <div class="col-md-8 col-md-offset-2"> <div ng ...

ngClass causing styling issue when applying styles

When I use class names like error and info, the CSS works fine. For example, in this Angular app (latest version) here: https://stackblitz.com/edit/github-i4uqtt-zrz3jb. However, when I try to rename the CSS classes and add more styles, like in the examp ...

extracting the value of an option from a form control to utilize in the component's model

I'm currently facing an issue where I am unable to retrieve the value of an option selection in my component class for further processing. Despite setting the value as [value]="unit" in the view, it still shows up as undefined when passed through onMo ...

Any ideas for handling ProtractorJS timeouts while clicking an element?

The Issue at Hand I am currently facing a challenge with clicking a straightforward 'New Booking' button in my Angular 5 Material 2 Application. The code snippet for the button is as follows: <button _ngcontent-c9="" class="mat-menu-item" ma ...

Creating a Responsive New Row for Grid Cells in CSS Grid

I am currently working on making my webpage responsive. I have encountered an issue where my text overflows into another grid cell because there is not enough space. Is there a way to move these cells into a new row so that the text has enough room and all ...

Facing an infinite loop issue with my ng-view and the index.html page in AngularJS

Hello everyone, I have a question regarding AngularJS ngview. I just started learning about Angular a week ago. In my code, the webpage is showing an infinite loop of the index itself instead of displaying the correct page. I've searched on Stack Ove ...

As you glide your cursor over the Sidebar, the text elegantly curves into view

I'm currently utilizing Chakra UI. When I hover over the Sidebar, it expands to the right side. However, the text gets distorted in the process. Is there a way to widen the Sidebar without distorting the letters? I would greatly appreciate any ...

Having trouble opening a JPEG file that was generated using the Writefile Api in Ionic-Cordova

Currently, I am using the writeFile API to create a JPEG image. The process is successful and the image is stored in the directory as expected. However, when I try to open the file manually from the directory, I encounter an error message saying "Oops! Cou ...

Adding material-ui library to a stylesheet

Can I include @material-ui/core/colors/deepOrange in my CSS file? I want to import this library and use it as shown below: import deepOrange from '@material-ui/core/colors/deepOrange'; import deepPurple from '@material-ui/core/colors/deepPu ...