What is the reason behind line-height not affecting the clickable area when reduced?

I have been working on a personal project where I added thumbnails for images that can be scrolled through and clicked to set the main image. However, I encountered a strange issue.

To demonstrate the problem, I created a Stackblitz project here: https://stackblitz.com/edit/angular-fidgzq?file=src/styles.css

When 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 clickable area for "Next Thumbnail Page Clicked" extends beyond the .thumbnail-image-button-down button.

https://i.sstatic.net/GvhpA.png

However, when the line-height is set to inherit, which computes to normal (without importing the angular theme), the clickable area for "Next Thumbnail Page Clicked" aligns exactly with the .thumbnail-image-button-down button.

https://i.sstatic.net/kq3bP.png

I initially thought that reducing the line-height may only affect the visual appearance but not the actual size of the div. However, as evident from the screenshots, the difference in heights is significant. Additionally, upon inspecting the .thumbnail-image-button-down button, it is clear that it is not expanded.

Is there a way to decrease the size of the .thumbnail-image-button-down button along with the clickable area for "Next Thumbnail Page Clicked"?

cssangularonclickgrid-layoutline-height

Answer №1

It seems the issue is related to the large font-size: 5em, equivalent to 80px. If the line-height specified is less than 80px, the clickable area extends beyond these boundaries.

To address this, you can prevent overflow by applying the following CSS:

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

View Forked Stackblitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss

Utilize Angular to Transfer HTTP Array Data from a Service to a Component

As I work on developing an app with Angular, my current challenge involves a service that retrieves an Array of Data from an online source. My goal is to make this array accessible in other components but I'm facing difficulty in passing the data to t ...

javascriptarraysjsonangularhttp

Is it possible to position two fixed divs side by side?

I am currently in the process of building my online portfolio. I am looking to create two fixed divs that will not scroll, each occupying the full height of the page. The content between these two divs should be scrollable while the bars on the left and ri ...

htmlcsspositionfixed

Ways to retrieve the marginLeft of an element set with absolute positioning?

Currently, I am attempting to display an information box when hovering over an element with the mouse. The issue I am facing is that the element moves, and I need to determine its left margin. However, the element does not have a margin-left property in ...

javascripthtmlcss

Create a smooth scrolling effect for a div with a fixed position

Having trouble scrolling a fixed position div on the page? Are you using this jquery script: $('html, body').animate({ scrollTop: $(".example").offset().top }, 750); I had to set the body overflow property to hidden for another issue. The ...

javascriptjquerycss

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Tomcat fails to identify cpho.html and hhpnz.html files as index.html files

I have a challenge running two applications within one Angular project. My objective is to host these apps on a Tomcat server. The issue arises when I attempt to build the project and deploy the dist folder to Tomcat. It seems that the cpho.html and hhpnz. ...

angulartomcat7

The parameter value in Angular routes is substituted with the parameter name in the AuthGuard's canLoad method

Within my AuthGuardService, I have a function called canLoad that accepts a parameter of type Route. In this function, I set the authentication redirect URL to the path property of the Route parameter. An issue arises when the path contains a route parame ...

angularauth-guard

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

javascripthtmljquerycss

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...

htmlcsshyperlinkstylesheet

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

I'm faced with a challenge of displaying employees' names and titles from a MSSQL Server database table on an ASP .NET webform as individual "card" objects. Currently, I am able to showcase a static number of records by using an asp button object ...

javascriptc#cssasp.netasp.net-mvc

What steps should I follow to include Sass compilation in my Angular CLI 6 project in the angular.json file?

I recently started working on a project in Angular using the latest version of Angular CLI 6.0. However, I need to enable Sass compilation for my existing project. Typically, you can specify this during project creation, but since mine is already set up wi ...

angularnpmsassangular-cli

Issues with the alignment of card-footer in Bootstrap 5 card components

Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 1 ...

htmlcssbootstrap-5

Is there a way to deactivate the onClick event when the dropdown placeholder is chosen?

I have experimented with different methods to prevent the onClick event when selecting either placeholder, but I have not been successful. Here is my current code: <div class="choosesign"> <div class="zodiacs"> < ...

javascriptonclickdropdown

Guide to creating a radio button with the appearance of a toggle button

Is there a way to style radio buttons like toggle buttons using only CSS and HTML? I want the group of radio buttons to have the appearance of toggle buttons, while still maintaining their functionality as radio buttons. UPDATE: I am open to simply makin ...

htmlcssradio-buttonradiobuttonlisttogglebutton

What are the drawbacks of combining exports through re-exporting in TypeScript?

Lately in TypeScript discussions, there seems to be a negative viewpoint on namespace BAD. However, I see value in organizing related declarations within a single namespace, similar to a library, to avoid excessive import statements. I have come across th ...

angulartypescript

Ensure that both textarea and pre elements have equal dimensions and line wrapping behavior in Internet Explorer

I am in the process of implementing a dynamic textarea that resizes automatically, based on a technique discussed in this article: Alistapart: Expanding Textareas (2011). The idea is quite straightforward: by using a pre element to mirror the input in the ...

javascripthtmlcssinternet-explorer

Unable to crop the content of an input text field using Angular Forms 7

I am currently using Angular forms(7.2.10) with Parent / child components in my Angular 7 application. My goal is to successfully trim the text field input (String) from both leading and trailing white spaces, but unfortunately, I have not been able to ach ...

angularangular-forms

Errors encountered while starting Angular due to issues in package.json configuration

Summary: Encountered an error while using 'Angular' for the first time, indicating tsc was not found in the package.json file. Details: As a beginner with Angular, I followed an example from a book and attempted to start it with np ...

javascriptnode.jsangularnpmraspbian

Creating responsive divs on my webpage

Although I have browsed through various posts with similar questions, none of the solutions seem to work for me. I will make sure to include all relevant information related to my issue and explain why I am unable to resolve it on my own. Currently, I am ...

phphtmlcssresponsive