The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4.

I experimented with applying custom CSS states in global.scss, but encountered issues where the active state seemed to be quickly removed right after clicking the button:

ion-button {
    &:active {
        color: red;
    }
    &:visited {
        background-color: black !important; // --background did not have any impact here
    }
}

I also tried using --background-activated, which technically worked, but did not achieve the desired effect of persisting the ripple background after the button was clicked.

I searched extensively for configuration options related to ion-ripple, but could not find anything that would allow me to make it persistent. One potential solution might involve utilizing the ion-ripple component itself, but I prefer to avoid this route as it would require replacing every instance of ion-button throughout the entire application...

Therefore, I am seeking advice on how to ensure that a generic ion-button retains a background color after it has been clicked?

cssangularionic-frameworkionic4

Answer №1

There's a possibility that you have come across this scenario as well. Upon investigating the ion-ripple component on its source code, it appears to contain a removeRipple function that eliminates the ripple effect after 200 milliseconds. It does not seem to provide an option for customizing this duration to maintain the ripple effect indefinitely.

However, leveraging NgClass might present a potential workaround. Consider implementing something along these lines...

home.page.html

<ion-button (click)="clickAction()" [ngClass]="{'clicked': beenClicked}">
  Change Color When Clicked
</ion-button>

home.page.ts

export class HomePage {
  beenClicked: boolean = false;

  clickAction() {
    this.beenClicked = true;
  }

}

home.page.scss

.clicked {
  --background: green;
}

You could opt to transfer the styling to global.scss for universal access, although maintaining the boolean property in each component may still be necessary unless employing a service or state management system to streamline button state maintenance.

I trust this information proves beneficial.

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

Adjusting the widths of <input> and <select> elements

I am facing an issue with aligning an input text box under a select element, where the input is intended to add new items to the select. I want both elements to have the same width, but my attempts have not been successful (as I do not wish to specify diff ...

htmlcss

Is there a CSS4 resolution for transitioning from 0 to auto?

I searched extensively for information on CSS4, but unfortunately I came up empty-handed. Back in the era of CSS3, a common challenge arose when it came to height transitions from 0 to auto without relying on JavaScript. The introduction of transitions sa ...

csscss-transitions

The expression has been altered following verification. It previously read as 'model: 1777' but now states 'model: 2222'

I've been working on this HTML code that utilizes [(ngModel)] to update input values, and I want the Total, Subtotal, and Amount Paid fields to be automatically calculated when a change is made. However, I'm encountering some issues with this app ...

angularformstypescript

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

htmlangulartypescript

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

csscss-positionabsolute

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

htmlcsstwitter-bootstrap

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

javascriptcssangularjsangular-ui-routerflexbox

Adding an element to an array in Angular 2 when an object is clicked

Whenever a row of objects is clicked, I want it to be added to the selectedProducts array. Within my TypeScript file: selectedProducts: Product[] = []; select(product) { this.selectedProducts.push(product); console.log(this.selectedProducts); ...

arraysangulareventsmouseeventpush

The background color of the columns is overwhelming

I would like to create a TV remote control design using bootstrap, but I am encountering some issues. The background color is overflowing and I'm unsure how to fix it. Please take a look at the code and feel free to offer any suggestions! @media scre ...

htmlcsstwitter-bootstrap

Typescript - A guide on updating the value of a key in a Map object

My Map is designed to store Lectures as keys and Arrays of Todos as values. lecturesWithTodos: Map<Lecture, Todos[]> = new Map<Lecture, Todos[]>(); Initially, I set the key in the Map without any value since I will add the Todos later. student ...

angulartypescriptdictionarysetkey

Automatically update the cart count in the header component in Angular 6 when a product is added to the cart, without the need to

I am working on an E-Commerce application using Angular 6. I am facing an issue with updating the shopping cart count in the header component whenever a product is added or removed from the cart. The cart count only updates when I refresh the page. I have ...

angular

To use the npm generator-ionic installation, make sure to have yo@>=1.0.0 installed in your

While attempting to set up generator-ionic, I encountered the following fatal error: EPEERINVALID <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375052595245564358451a5e5b565c575b6f1d54585459">[email protected]</a&g ...

npmionic-frameworkyeoman

Step-by-step guide to retrieving the value of a duplicate input field with identical IDs in Angular4

This is the form I am working on: <button (click)="M_add()">Add</button> <tbody id="_tbody"> </tbody> Whenever the add button is clicked, it triggers the creation of an input field. let tbody = document.getElementById("_tbody"); ...

angularjsangular

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

javascripthtmlcss

Morris.js tutorial: Enhancing bar charts with data labels

I have this: But I want this instead: Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

javascriptjqueryhtmlcssmorris.js

Strange glitch in the Trebuchet MS font

I am currently attempting to utilize the jquery.fullcalendar plugin with jQuery UI theming. Everything seems to be functioning properly, except for an issue where the user's selection of a time range (week or day view) is displaced by approximately on ...

jquerycssjquery-uijquery-pluginsfullcalendar

Ways to generate multiple elements using JavaScript

Is there a way to dynamically freeze columns in a table as I scroll it horizontally? I've achieved this statically using JavaScript, but is there a way to indicate the number of columns and achieve the desired style? This is what my JavaScript code c ...

javascripthtmlcssdom

Column div being obscured by footer

My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...

htmlcss

Custom Bootstrap 3 Panel Organization

I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...

csstwitter-bootstraplayoutpanel

A step-by-step guide to enabling editing for a specific row in a Primeng DataTable in Angular 2 with just the click of

I'm currently working on implementing DataTable from Primeng in Angular 2. The datatable displays a set of rows with an Edit button for each row. When the Edit button of any row is clicked, all fields of that particular row should become editable. ...

angularprimeng