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

`A problem with HTML element display in Internet Explorer versions 8 and 9 involving <p> and <h2> tags`

While working on my website, I encountered an issue with the way text is being rendered in <p> and <h2>. The footer of my site has three columns, but for some reason the middle column is displaying its <p> text within the <h2> text ...

htmlcssinternet-explorer-8internet-explorer-9

Ensuring that the image perfectly fills the entire screen on an iPhone X using React Native

Looking for a solution to make my image fit the entire screen on the iPhone X simulator. I've tried adjusting the imageContainer width to "100%" and the container that encompasses everything, but haven't had any luck. Would appreciate any suggest ...

javascriptcssreactjsreact-native

Struggling to integrate the navigation bar with Wordpress platform

For a while now, I have been facing challenges with the navigation bar on the WordPress theme I am currently creating. I am struggling to get the navigation bar to display correctly. Below is the code snippet from my header.php file: <body> &l ...

phphtmlcsstwitter-bootstrap

Expand a section of the webpage to fill the entire screen

I'm working with some HTML code that looks like this: <header>title</header> <content class="container-fluid"> <div class="row"> <div class="col-sm-3 leftside"> <ul> <li>test</li> ...

htmltwitter-bootstrapcssresponsive-design

Reaching the maximum request threshold

Currently, I am facing an issue where users are able to upload files from the client side (using Angular 4) to the server (implemented with Spring Boot). The problem arises when a user attempts to upload more than 6 files at once. In such cases, Chrome uti ...

javascriptajaxangulargoogle-chromebrowser

Steps to set angular for all items in the dropdown menu:

I am currently working on implementing a dropdown feature within my Angular application. The dropdown will display a list of shops, and when a shop is selected, it will show the content related to that particular shop. I need to add a new item called "ALL ...

angulartypescriptangular2-templateangular2-formsangular2-services

What is the best way to integrate model classes within an Angular module?

I have a few classes that I want to keep as plain bean/DTO classes. They are not meant to be display @component classes, @Pipe classes, or @Directive classes (at least, that's what I believe!). I am trying to bundle them into a module so that they ca ...

javascriptangulartypescriptangular-module

Implementing both fancybox and a hover remove icon functionality on a single image

I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities ...

jquerycssfancybox

Trouble arises in next.js containers when their content exceeds the specified limits due to @media rules adaptation

I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial. The problem revolves around three layers (as seen in t ...

cssflexboxnext.jsresponsive

execute a different function once the animation has finished running with the .bind

When attempting to detect the completion of a CSS animation in order to remove a class, I encountered an issue where using .bind causes the animation end event to trigger even for the other function. You can view the complete code here. How can I ensure ...

jquerycss

What is the method for aligning inline-block text to the right after a line break?

I am currently encountering a challenge in developing a directory tree using <ul> element, particularly when the text of an item exceeds the width of the container. As I am utilizing the antd React library for this project, my options are somewhat l ...

htmlcsslayoutantd

Collecting information from form submissions, accessing data from the database, and displaying the results

I am currently working on a project using nodejs, express, and mongodb within the cloud9 IDE. My goal is to create a page with a form that allows users to input data, search for corresponding information in the database, and display that data on the same ...

javascripthtmlcssnode.jsexpress

"Utilize Ionic to seamlessly showcase the SideMenu when transitioning between different app states

As I embark on my project using Ionic Starter SideMenu, I am faced with the challenge of navigating between states while displaying the SideMenu. However, in my app, the state transition will not be triggered by a menu click, but rather by a certain condit ...

angularjsionic-framework

Customize tab background color in Material-UI by utilizing a styledTab component with a passed prop

I've customized this tab to have my desired style: import { withStyles } from "@material-ui/core/styles"; const StyledTab = withStyles((theme) => ({ root: { backgroundColor: "yellow", }, }))((props) => { const { shouldSetBackgroundCol ...

cssreactjsmaterial-uimern

Issue encountered with ng-include compatibility in Angular 5

Just getting started with Angular and working on a small test project using Angular 5 and Visual Code. I'm attempting to use ng-include but the template is not displaying. src add-device add-device.component.html add-device.com ...

angulartypescript

Struggling to retrieve variable within the .catch function in Ionic 3

I am having trouble accessing the toast variable from the constructor in order to toast errors. It keeps showing as undefined, and I'm not sure why. This issue seems to only occur in this class, which is strange. The error message reads "ERROR TypeErr ...

angulartypescriptionic3

GWT Designer style issue plaguing development efforts

Currently, I am working on designing a login view using GWT Designer while incorporating styles from Twitter Bootstrap. The structure I have set up is as follows: However, the displayed result does not meet my expectations: Despite setting all CSS paddi ...

cssgwtstylesgwt-designer

Customize WordPress zerif-lite theme with CSS to decrease page width temporarily

Is there a way to decrease the width of a specific page on my website without modifying the current theme that I am using (zerif-lite)? I want to accomplish this task by adding custom CSS to styles.css. However, I am facing difficulties as I only want to a ...

htmlcsswordpresswordpress-theming

Tips for troubleshooting a Keycloak-enabled Angular/Java/Spring application:

Recently, I developed a basic application that leverages keycloak for managing user authentication. However, I am interested in making certain routes accessible to the public. For example, something along the lines of localhost:4200/public-route. I attemp ...

javaangularspring-bootkeycloak

angular2 fullCalendar height based on parent element

Currently, I am using angular2-fullcalendar and encountering an issue with setting the height to 'parent'. The parent element is a div but unfortunately, it does not work as expected. The navigation bar appears fine, however, the calendar itself ...

angulartypescriptfullcalendar