Turn off hover effects

Anvil Q&A
1

This is triggering my OCD and I don’t quite understand enough about CSS to be able to tweak anything, so hopefully someone can help :joy:

wWhat can i change in the CSS, or even apply as a role, to stop inputs such as drop downs and datepickers from changing size on a mouse hover action?

Without hover:
image

With hover:
image

for example the date picker reduces in height by a couple of pixels, and makes the whole page move up with it, which doesnt happen with text input boxes and i cant find anything in the CSS that has made a difference or anything online that makes any sense.
Drops downs seem to reduce a couple of pixels horizontally as well.

Does anyone have a clue they can point me in the right direct with please?

2

It may be slightly different for the other themes, but in material, these are the relevant blocks:

input.anvil-component:hover, .anvil-component select:hover, .anvil-datepicker input:hover {
  border-bottom: 2px solid rgba(0,0,0,.87);
  padding-bottom: 3px;
}

input.anvil-component:focus, .anvil-component select:focus, .anvil-datepicker input:focus {
  border-bottom: 2px solid %color:Primary 700%;
  padding-bottom: 3px;
  box-shadow: none;
}

for the other themes the css selectors is probably the same and you can delete those blocks in the theme your using.

3

thank you Duncan, will give that a go!

1 Like