Disable hover color change / Retain table row color based on conditions

Back to Forums

Ooi Zhong Quan

Solved

Question

CSS

OutSystems Widgets

Hello All,

Currently I am trying to keep the color retained in certain conditions, e.g. to show the row record as red when it is not yet processed. However the color will goes off when I mouse over those rows, means it shows red when not is not hovered but it shows original color (White) when mouse over it.

For example, record of 123 is now in red.

But it goes white (original color) when user mouse over it. How to retain the red color?

This is my applied style for the background color:

Thanks.

TestModule.oml

01 Jun 2020

Benjith Sam

MVP

Solution

Hi Junior,

Define the below mentioned CSS definition in the respective screen Style Sheet section.

Solution 1: (Preferred One)

Code Snippet

tbody > tr:hover > td {
    background-color: unset !important;
    color: unset !important;
}

Solution 2:

Code Snippet

tbody {
    pointer-events: none;
}

Hope this helps you!

Regards,

Benjith Sam

See solution in context

01 Jun 2020

3 replies

Last reply 02 Jun 2020

Show thread

Hide thread

Carlos Lessa

MVP

Benjith Sam wrote:

Hi Junior,

Define the below mentioned CSS definition in the respective screen Style Sheet section.

Solution 1: (Preferred One)

Code Snippet

tbody > tr:hover > td {
    background-color: unset !important;
    color: unset !important;
}

Hi Benjith, did you test this solution? I test something similar in the past and was removing the colour of the row, like in this example he has 2 colours depending on the result, like white and red, but using a similar solution just removed the colour red when hovering and he wants the row with the colour the was added

01 Jun 2020

Ooi Zhong Quan

Benjith Sam wrote:

Hi Junior,

Define the below mentioned CSS definition in the respective screen Style Sheet section.

Solution 1: (Preferred One)

Code Snippet

tbody > tr:hover > td {
    background-color: unset !important;
    color: unset !important;
}

Solution 2:

Code Snippet

tbody {
    pointer-events: none;
}

Hope this helps you!

Regards,

Benjith Sam

Hi Benjith,

I tried the first solution and it works. I realized it needs some works when overwriting default Dublin Theme's CSS.

Thanks for the help !

02 Jun 2020

Benjith Sam

MVP

Junior wrote:

Hi Benjith,

I tried the first solution and it works. I realized it needs some works when overwriting default Dublin Theme's CSS.

Thanks for the help !

I'm happy that you got it solved :)

Glad I could be of help :)

Regards,

Benjith Sam

02 Jun 2020

JitendraYadav

Hi,

override the css of onmouseover using ! important.

thanks

01 Jun 2020

Salman Ansari

Junior wrote:

Hello All,

For example, record of 123 is now in red.

But it goes white (original color) when user mouse over it. How to retain the red color?

This is my applied style for the background color:

Thanks.

Please check the attached oml. Hope this helps.

ConditionalCSSTableRecords.oml

01 Jun 2020

8 replies

Last reply 01 Jun 2020

Show thread

Hide thread

Ooi Zhong Quan

Salman Ansari wrote:

Junior wrote:

Hello All,

For example, record of 123 is now in red.

But it goes white (original color) when user mouse over it. How to retain the red color?

This is my applied style for the background color:

Thanks.

Please check the attached oml. Hope this helps.

Hi Salman,

Sorry it seems like your oml is not available as it is showing 'Processing Upload...'.

01 Jun 2020

Salman Ansari

Junior wrote:

Salman Ansari wrote:

Junior wrote:

Hello All,

For example, record of 123 is now in red.

But it goes white (original color) when user mouse over it. How to retain the red color?

This is my applied style for the background color:

Thanks.

Please check the attached oml. Hope this helps.

Hi Salman,

Sorry it seems like your oml is not available as it is showing 'Processing Upload...'.

Let me re-upload again

ConditionalCSSTableRecords.oml

01 Jun 2020

Ooi Zhong Quan

Salman Ansari wrote:

Junior wrote:

Salman Ansari wrote:

Junior wrote:

Hello All,

For example, record of 123 is now in red.

But it goes white (original color) when user mouse over it. How to retain the red color?

This is my applied style for the background color:

Thanks.

Please check the attached oml. Hope this helps.

Hi Salman,

Sorry it seems like your oml is not available as it is showing 'Processing Upload...'.

Let me re-upload again

Hi Salman,

It seems like I have the same thing as yours which doesn't get me to the expected outcome.

01 Jun 2020

Salman Ansari

Junior wrote:

Salman Ansari wrote:

Junior wrote:

Salman Ansari wrote:

Junior wrote:

Hello All,

For example, record of 123 is now in red.

But it goes white (original color) when user mouse over it. How to retain the red color?

This is my applied style for the background color:

Thanks.

Please check the attached oml. Hope this helps.

Hi Salman,

Sorry it seems like your oml is not available as it is showing 'Processing Upload...'.

Let me re-upload again

Hi Salman,

It seems like I have the same thing as yours which doesn't get me to the expected outcome.

I have created demo file for you and working on my end as expected.
You need to check very carefully again what you have missed in your code using matching with my oml

01 Jun 2020

Ooi Zhong Quan

Salman Ansari wrote:

I have created demo file for you and working on my end as expected.
You need to check very carefully again what you have missed in your code using matching with my oml

Hi Salman,

My concern is to retain the color when mouse over the colored rows, I couldn't see any css for hover in your oml unfortunately.

01 Jun 2020

Salman Ansari

Junior wrote:

Salman Ansari wrote:

I have created demo file for you and working on my end as expected.
You need to check very carefully again what you have missed in your code using matching with my oml

Hi Salman,

My concern is to retain the color when mouse over the colored rows, I couldn't see any css for hover in your oml unfortunately.

you dont want red color when mouse hover in that row. ie 123

01 Jun 2020

Ooi Zhong Quan

Salman Ansari wrote:

Junior wrote:

Salman Ansari wrote:

I have created demo file for you and working on my end as expected.
You need to check very carefully again what you have missed in your code using matching with my oml

Hi Salman,

My concern is to retain the color when mouse over the colored rows, I couldn't see any css for hover in your oml unfortunately.

you dont want red color when mouse hover in that row. ie 123

Hi Salman,

I wish to have the same color when mouse over in that row, which means I don't want it to become other colors(theme color) when mouse over that row.

01 Jun 2020

Salman Ansari

Junior wrote:

Salman Ansari wrote:

Junior wrote:

Salman Ansari wrote:

I have created demo file for you and working on my end as expected.
You need to check very carefully again what you have missed in your code using matching with my oml

Hi Salman,

My concern is to retain the color when mouse over the colored rows, I couldn't see any css for hover in your oml unfortunately.

you dont want red color when mouse hover in that row. ie 123

Hi Salman,

I wish to have the same color when mouse over in that row, which means I don't want it to become other colors(theme color) when mouse over that row.

I am not able to run your application but you can try below using the inspect element and see where Red color come in your css and replace it with white

01 Jun 2020

Benjith Sam

MVP

Solution

Hi Junior,

Define the below mentioned CSS definition in the respective screen Style Sheet section.

Solution 1: (Preferred One)

Code Snippet

tbody > tr:hover > td {
    background-color: unset !important;
    color: unset !important;
}

Solution 2:

Code Snippet

tbody {
    pointer-events: none;
}

Hope this helps you!

Regards,

Benjith Sam

01 Jun 2020

3 replies

Last reply 02 Jun 2020

Show thread

Hide thread

Carlos Lessa

MVP

Benjith Sam wrote:

Hi Junior,

Define the below mentioned CSS definition in the respective screen Style Sheet section.

Solution 1: (Preferred One)

Code Snippet

tbody > tr:hover > td {
    background-color: unset !important;
    color: unset !important;
}

01 Jun 2020

Ooi Zhong Quan

Benjith Sam wrote:

Hi Junior,

Define the below mentioned CSS definition in the respective screen Style Sheet section.

Solution 1: (Preferred One)

Code Snippet

tbody > tr:hover > td {
    background-color: unset !important;
    color: unset !important;
}

Solution 2:

Code Snippet

tbody {
    pointer-events: none;
}

Hope this helps you!

Regards,

Benjith Sam

Hi Benjith,

I tried the first solution and it works. I realized it needs some works when overwriting default Dublin Theme's CSS.

Thanks for the help !

02 Jun 2020

Benjith Sam

MVP

Junior wrote:

Hi Benjith,

I tried the first solution and it works. I realized it needs some works when overwriting default Dublin Theme's CSS.

Thanks for the help !

I'm happy that you got it solved :)

Glad I could be of help :)

Regards,

Benjith Sam

02 Jun 2020

Benjith Sam

MVP

Hi Carlos,

Yes, I tested the solution and I guess this is what Junior is looking for...

See this Sample Screen

Hope this helps!

Regards,

Benjith Sam

01 Jun 2020

3 replies

Last reply 02 Jun 2020

Show thread

Hide thread

Carlos Lessa

MVP

Benjith Sam wrote:

Hi Carlos,

Yes, I tested the solution and I guess this is what Junior is looking for...

See this Sample Screen

Hope this helps!

Regards,

Benjith Sam

Nice, that worked on your sample, I was trying to find the one I said with this same behaviour and I didn't find, I replicated now the behaviour to test and didn't was necessary to do any change here, the hover here in the new one didn't make any change, worked just fine

sample

01 Jun 2020

Carlos Lessa

MVP

Benjith Sam wrote:

Hi Carlos,

Yes, I tested the solution and I guess this is what Junior is looking for...

See this Sample Screen

Hope this helps!

Regards,

Benjith Sam

Checking your sample you didn't apply your solution either, did you?

looks similar to mine default

01 Jun 2020

Benjith Sam

MVP

Carlos Lessa wrote:

Checking your sample you didn't apply your solution either, did you?

looks similar to mine default

Hi Carlos,

The Movies application which you created is based on London Theme and in that it's working fine but the application which uses Dublin theme as the application base theme do have a table record hover implementation of which I override the pre-defined CSS definition, apart from the mentioned CSS definition I didn't included any other extra CSS definition.

Hope this helps!

Regards,

Benjith Sam

02 Jun 2020

JitendraYadav

Cool.

02 Jun 2020

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

See the full guidelines