Hello all,
I am having a hard time with making a row change background colors when it is hovered.
This is just a basic row, not a table.
I’ve tried following the example in the docs - nothing
I’ve tried doing this in the design panel and get nothing
I’ve tried attaching a custom CSS style sheet and get nothing
Can anyone help me out on this?
Thank you.
Hi,
Maybe just explain/show what you’ve tried and what’s the result, that is not working.
Here is a video (with audio) of me trying to make it work. I have to be missing something
Thank you for you help
P.S The CSS example was from my practical use and wouldn’t have worked in the example.
20221121_130347
Can you check what css file is selected in the project options for the style file option:
and after applying the styles in the design view - are any of them actually added to it (in the css file) - so just open the css file in Wappler and check this?
So I do have my style.css file selected but the class created in design view does not show in it.
I just tested this locally and couldn’t recreate the issue.
I created the same structure as you, added the same class, styled the hover state:
Then checked the generated css in the style.css file and everything looks fine there:
Maybe try closing/reopening the page and restart Wappler.
Strange. I’ll keep messing with it. Thank you
So I can’t get this to work no matter what I do.
Screen Shot 2022-11-22 at 11.53.16 AM|351x48
The CSS is there but nothing is happening
Well if the css is there, then everything should be fine. Is the css file included on the main page?
Have you tested in your browser and cleared your browser cache? What kind of hosting are you using?
I have restarted Wappler and my computer, opened and closed the page, made sure everything (Wappler, node packages etc) are up to date, tried Safari and Chrome, cleared caches on both and I just can’t get this to change the row’s background color. It does not work in design view either.
And yes, the css is included on the main page. I have also tried hitting the deploy button.
The class shows in my css and the styles panel. However, if I add any attributes to that class (and only that class) it has no effect. (Ive tried other attributes besides background color and get nothing)
Right now I am just working off my local host with Docker
If you’re using Docker then you need to deploy your project first, after making changes.
What happens when you try to open the css file in the browser after deploying, are the css rules also visible there?
Do you have a live link where i can check this - all seems correct to me from your screenshots.
Scratch all that, I just got it to work. I made a 2nd style sheet and attached it to the element in the styles panel
Thank you for your patience with me, I really appreciate your help. This one was a real head scratcher.
