No Hover behavior for Custom components?

Venkata Rahul S

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

Not sure what Cookbook example you are looking at, but if you are looking for hover effects like in "https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=listView&demo=arrayListView", 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

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