2

I'm working on a personal project to have thumbnails for images that you can scroll through and click to set the main image. I noticed an odd thing happening.

I re-created the issue in a Stackblitz project here (https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css)

If I set the line-height of .thumbnail-image-button-icon to 20px in thumbnails-display.component.css (or import ~@angular/material/prebuilt-themes/deeppurple-amber.css in style.css), the area that the "Next Thumbnail Page Clicked" will fire is beyond the area of the .thumbnail-image-button-down button.

enter image description here

But, if the line-height is inherit, which computes to normal (without importing the angular theme), the area that the "Next Thumbnail Page Clicked" will fire is exactly around the .thumbnail-image-button-down button.

enter image description here

I thought reducing the line-height may have done so visually, but left the div expanded, but, as you can see in the screenshots, the heights are significantly different. Also, if you inspect the .thumbnail-image-button-down button, you can see it isn't expanded.

How can I reduce the size of the .thumbnail-image-button-down button as well as the area that "Next Thumbnail Page Clicked" will fire?

ScubaSteve
  • 7,724
  • 8
  • 52
  • 65
  • 2
    Consider simplifying the problem and posting the code in the question itself. – Michael Benjamin Jul 26 '21 at 17:25
  • Stackblitz requires third-party cookies to be enabled, so putting your code there doesn't let me actually look at it. Even a web page where this is deployed would be useful. – Kerri Jul 26 '21 at 22:09

1 Answers1

1

I think that's because of big font-size: 5em which is 80px. If you specify line-height less than 80px then clickable area goes beyond those boundaries anyway.

The solution might be preventing that overflow:

.thumbnail-image-button-icon {
  ...
  overflow: hidden;
}

Forked Stackblitz

yurzui
  • 205,937
  • 32
  • 433
  • 399