While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color of a picture was yellow.See Image
This figure shows the new background color after using the pseudo-class. It is red now.
See Image
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger. So how to achieve this?
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
test(){
console.log("message");
}
For Details,check Pseudo-classes for quick apps
Related
I am new to using MUI and I'm trying to create a simple animation which would trigger when a row is removed by the click of a row button (either fade out or even better have it compress). I currently have a workaround solution in which I grab the row through the data-id using document.querySelector and then add a class to it, but I would like to know how to do this using inline css.
After research it looks like I would have to use something like adding a keyframe (which I've seen done for individual elements) but I'm unclear how to do that for a row in a MUI data grid.
I've tried using UseGridApiRef and then using the getRowElement to add the below keyframe to that but can't get the syntax right.
I want to do this because currently I believe I am changing the DOM directly (very slow) by doing this:
let el = document.querySelector(`.MuiDataGrid-row[data-id="${id}"]`);
el.classList.add("animate-launch-case");
// Global css Page
.animate-launch-case {
opacity: 0;
transition: opacity 1s ease-in;
}
I want to be able to change the virtual DOM instead but having trouble understanding how to do it with state. Here is a Sandbox of my datagrid and here is an example of a keyframe I think would work:
const myEffectExit = keyframes`
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-200%);
}
`;
I think I have a very basic problem but I can't resolve it. So what I am trying to do is to implement a button in Ionic that when pressed change the style of a style. To keep it simple for now I try and change the background color of a div. However, it does not work neither does it give an error. (I use console page of browser to view changes, look for errors etc)
The code in the card.page.html page is
<ion-button
(click)="setStyle('red')"
[style.--background]="'pink'"
>
Some Button
</ion-button>
The code in the card.page.ts is
setStyle(value: string): void {
console.log('read More Works');
this.aColor = '#yellow';
console.log('read More still Works');
}
and that is it. Clicking on 'Some Button' button does not do anything except the logging but I am pretty sure it is not two way binding that is the issue as I tried just using for example trying with just some text as being the 'variable' I want to change and that worked fine.
I do appreciate any help :(
Thanks
You can use pre defined CSS styles for that. Something like this:
card.page.scss
#somediv {
&.initial-style {
background: #000;
}
&.dinamic-style {
background: #fff;
}
}
card.page.html
<div id="somediv" [class]="apply_styles ? 'dinamic-style' : 'initial-style'">
styles applied: {{ apply_styles }}
</div>
<ion-button (click)="changeStyle()">Change Style</ion-button>
card.page.ts
apply_styles: boolean = false;
changeStyle() {
this.apply_styles = !this.apply_styles;
}
Of course this is very simple. But I hope it can put you in the right direction.
Multiple click on button on browser, sends multiple request to server.
The easiest way to solve it is to stop multiple click on browser by JavaScript.
Can anybody suggest what could be better way to solve it?
For easiness i'll give litter design overview
BROWSER ---to---> WEB[all controllers] ----to-->rest call to service.
Adding More information:
Note: we are sending CSRF token
Step 1: we are on /page/show - GET
Step 2: we Post the form /page/show -POST [srf token included in it]
Step 3: ON-SUCCESSFUL completion of save we redirect again to /page/show
Thanks
There are 2 ways you can solve this
why not when the button is clicked disable the button and show some loading gif. Loading gif is very important to inform the user something is happening.
If you want that after the button click user should not be able to interact with the page at all then create a div with background color as grey with some opacity so that user is able to see the page behind and increase its z index so that its on top and thus stops user from interacting with the page. (You can also add loading gif icon in side div using same technique)
if you want to take second approach, here is small example to get you going
css for the div
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}
//function to show overlay
function ShowOverLay(){
var overlay = $('<div id="overlay"> </div>');
overlay.appendTo(document.body)
}
//function to hide overlay
function DeleteOverLay(){
$('.overlay').remove();
}
//function to get data
function GetData(){
//at first show the overlay
ShowOverLay()
//now make an ajax call
$.ajax({
url: url,
data: data,
success: function(data){
if(data){
//some processing with data if successfull
//hide the overlay now
DeleteOverLay();
}
},
dataType: dataType
});
}
the button is automatically generated by the ActionCell in gwt, I want to change the width and height of the generated button, any method?
I chekced the ActionCell has no any addStyleName to allow me to change the css of the button.
You have several options.
If you use this cell in a CellTable or DataGrid, set the style on a column which is built using ActionCell:
myColumn.setCellStyleNames("myButtonStyle");
You can also set this style on the parent element which includes ActionCell:
.myButtonStyle button {
background: red;
}
or, even more specific, if necessary:
.myButtonStyle td button {
background: red;
}
In my page I have a Gxt ContentPanel with a white background. However, when the user mouses over the Header of the ContentPanel, I would like the background to change colors.
I tried achieving this by using the protected addStyleOnOver method of Gxt Component, but it doesn't have any effect. Is there anything else I need to do to use that methods (I'm already sinking the ONMOUSEOVER and ONMOUSEOUT events), or a better way to change the background?
you can do this using below code its working
ContentPanel contentPanel = new ContentPanel();
contentPanel.setStyleName("background");
and write below code in your css
.background:hover .x-panel-body {background-color: red !important;}
i'm not sure if this works, but you can test it...
final ContentPanel test = new ContentPanel();
test.getHeader().addListener(Events.OnMouseOver, new Listener<BaseEvent>() {
#Override
public void handleEvent(BaseEvent be) {
test.getHeader().setStyleName("your_new_style");
// or test.setStyleName("your_new_style");
}
});
You could simply add a style to the header, then add some css to change the color.
test.getHeader().addStyleName("my_style")
# css
my_style:hover { background-color: yellow; }
This is a bit trickier if you want to change the bg of the whole ContentPanel during onMouseOver of the header, in which case, add the mouse over event to the header where handle event adds style to the content panel (or content panel body depending on what you want), then add the appropriate styles to you css.
# css
my_style { background-color: yellow; }