18
Views
15
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.

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

Rank: #151

Hi Nannu,

you can try something like the example below:

Hope this helps.

Regards.

Rank: #54

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

Rank: #151

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

Rank: #1298

Hi Agno,

Thank you for your reply.

I need to add two different IF conditions.

Thanks

Rank: #151

Right, no problem, 

you can do that, example:

Regards.

Rank: #1298

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


Rank: #54

Hi Nannu,


You can do that using an expression like:


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

Rank: #1298

Hi,

How can I put that expression on a button?

Thanks

Rank: #151

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


Rank: #54

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:



Rank: #1298

Hi,

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

Thanks

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

Rank: #1298

Hi Christopher,

It's a reactive web application.

Thanks

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

Rank: #1298