Forum Stats

  • 3,816,603 Users
  • 2,259,212 Discussions


No Hover behavior for Custom components?

Venkata Rahul S
Venkata Rahul S Member Posts: 36 Blue Ribbon

I created a custom component with a oj-list-view inside its structure.

The list renders fine but I am not seeing the same hover behavior for the rows of the list as I do in the cookbook.

I checked the css in the cook book but there could not quite see how the hover behavior is originating for a list outside a Custom component. So the conclusion is perhaps that for oj-list-view used directly through the index.html, the behavior does not differ so much.

But for a custom component, I believe the .root descriptor is different. This may be explaining why the list item styling does not change on mous hover.

But again, another observation is that I used a oj-web-applayout-header class for one of the elements and it works perfectly (sticks to the bottom of the screen).

The question now is, can oj-list-view or other standard componets used inside custom components reuse the style declarations from the redwood.css of the SPA (which gets injected at build time)? Or do I need to do some import for the specific component styles with the procedure mentioned in 4b of this page from the dev guide?



  • Nathan Zentner
    Nathan Zentner Member Posts: 26 Green Ribbon

    Not sure what Cookbook example you are looking at, but if you are looking for hover effects like in "", then you are most likely missing "selection-mode". If you set this to single, then you will get the hover functionality, which implements the --oj-core-bg-color-hover variable. You could set that in your root to have all your hover colors the same, or implement it within your component css

  • Venkata Rahul S
    Venkata Rahul S Member Posts: 36 Blue Ribbon
    edited May 4, 2022 2:19PM

    Thank you Nathan.

    Your solution is one possible way of looking at it. The actual issue, I just discovered is that I was not importing these components in my viewModel. The nodes are present in my view (htm) but was not importing them in the typescript part.

    I checked if the solution I found is indeed solving my problem. I removed the import declarations thrice and added them back. I can repeat the behavior.. So possibly I am missing some logic in the binding workflow. Will figure that out. But for now, I have inched forward