1094
Views
16
Comments
Solved
How to apply Multiple conditional CSS to a button?
Question
Application Type
Reactive

Hi,

How can I add multiple style properties to a button? Basically I need to add two if statements in a style property of a button, something like this

Thank you for your time.

2024-10-25 09-14-42
Christopher Bautista
Solution

Hi Nannu,


Apologies, I overlooked it.

How about you try this:

Then on the On Click event, please make sure that you change the value of IsSelected or IsMissingFields (what you think is necessary) for the screen render to be triggered.

Thank you and kind regards,

Chris

2021-06-09 13-39-18
Agno Silveira
 
MVP

Hi Nannu,

you can try something like the example below:

Hope this helps.

Regards.

2018-10-29 08-31-03
João Marques
 
MVP

Hi Nannu,


You can do it like Agno is suggesting using the property style but you will have to replace the (comma) by a ; (semicolon) which marks the end of a CSS instruction, otherwise it won't work. Here's an example:


Kind regards,
João

2021-06-09 13-39-18
Agno Silveira
 
MVP

exact, adjusted the sample image. Thanks João.

UserImage.jpg
Nannu

Hi Agno,

Thank you for your reply.

I need to add two different IF conditions.

Thanks

2021-06-09 13-39-18
Agno Silveira
 
MVP

Right, no problem, 

you can do that, example:

Regards.

UserImage.jpg
Nannu

Hi Agno,

In my case I have to separate conditions and both can be true at same time.

For eg.  Button is selected(Change background color) and user is missing some required fields(Highlight button's border with red color). 

Thanks


2018-10-29 08-31-03
João Marques
 
MVP

Hi Nannu,


You can do that using an expression like:


If(IsSelected, "background-color:red; ","") + If(MissingSomeField, "border-color:red;")

UserImage.jpg
Nannu

Hi,

How can I put that expression on a button?

Thanks

2021-06-09 13-39-18
Agno Silveira
 
MVP

as João commented, the solution would be to place the IF's in extended properties:


2018-10-29 08-31-03
João Marques
 
MVP

You click on the button and on the right side properties panel, you will see the option Extended Properties where you can add style and then on the line below you place your expression:



UserImage.jpg
Nannu

Hi,

I tried as you suggested but it didn't work. Also First condition stopped working.

Thanks

2024-10-25 09-14-42
Christopher Bautista

Hi Nannu,

Good morning!

Can you please change the method of your button to "Ajax submit" and apply as well the correct position of the Ajax refresh node in your logic for the button.

Kind regards,

Chris

UserImage.jpg
Nannu

Hi Christopher,

It's a reactive web application.

Thanks

2024-10-25 09-14-42
Christopher Bautista
Solution

Hi Nannu,


Apologies, I overlooked it.

How about you try this:

Then on the On Click event, please make sure that you change the value of IsSelected or IsMissingFields (what you think is necessary) for the screen render to be triggered.

Thank you and kind regards,

Chris

UserImage.jpg
Nannu
2019-07-16 07-52-26
Simran Punjwani


option 1


If(condition1, "background-color:red; ","") + If(condition2, "border-color:red;", "")    


option 2 (if you want to avoid spaces in style class)


If(condition1, "background-color:red; ", If(condition2, "border-color:red;", "")  )

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.