How to use CSS to align text at the bottom of Angular Material icons within spans?

Looking for assistance with this code snippet. I am trying to align the text within the spans to the bottom of the stars.

<ng-container *ngIf="starCount">
    <span>Not Relevant</span>
    <button
        mat-icon-button
        color="primary"
        *ngFor="let ratingId of ratingArr; index as i"
        [id]="'star_' + i"
        (click)="onClick(i + 1)">
        <mat-icon>{{ rating > i  ? 'star' : 'star_border' }}</mat-icon>
    </button>
    <span>Very Relevant</span>
</ng-container>

I have tried various methods in the Chrome inspector but have not seen any significant improvements.

Answer №1

To create a similar layout, consider the following code snippet:

<div *ngIf="starCount" style="display: flex; align-items: center">
    <span>Less Important</span>
    <button
        mat-icon-button
        color="primary"
        *ngFor="let ratingId of ratingArr; index as i"
        [id]="'star_' + i"
        (click)="onClick(i + 1)">
        <mat-icon>{{ rating > i  ? 'star' : 'star_border' }}</mat-icon>
    </button>
    <span>More Important</span>
</div>

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

What is the process for inheriting HTML templates?

I am currently utilizing KnockoutJS along with its default template engine. My goal is to establish a master template that can serve as a foundation for other templates to build upon, similar to a UserControl in .NET but within an HTML context. For instan ...

What is the best way to ensure that my drop down select menu consistently displays the same data even after performing a query with the menu?

Hey there! I'm facing a little hiccup with a drop-down selection box. Here's what I'm trying to do - get someone to log into a database, and then display all available tables in the selection box. Once they choose a table, they hit select an ...

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

Tips for creating a web page with rounded screen corners, similar to those on an Android smartphone

I am looking to create rounded screen corners on a website similar to those found on an Android smartphone. Here is an example of what I am trying to achieve: I have searched for tutorials online but haven't had much luck finding the right solution. ...

Tips for transforming a hover menu into a clickable menu

The scenario above demonstrates that when hovering over the dropdown menu, it displays a submenu. However, I want the submenu to be displayed after clicking on the dropdown text. Could anyone provide assistance on how to change the hovermenu to a clickabl ...

Dynamic page url redirection involves creating search-engine friendly URLs for dynamic

After successfully incorporating URL rewriting into my PHP website, I am facing an issue with displaying the links as desired. mydomain.com/komet-india/Best-Indian-Hill-Stations-1/Delhis-Hotel The elements Best-Indian-Hill-Stations,1,Delhis-Hotel in the ...

Is there a way to customize the color of a MUI styled component?

I have a customized MUI component that displays a circular badge in green. const StyledGreenBadge = styled(Badge)(({ theme }) => ({ '& .MuiBadge-badge': { backgroundColor: '#44b700', color: '#44b700', ...

What is the best way to personalize the icon for this navigation button?

I'm interested in making some changes, especially to the border. I've already figured out how to adjust the color of the 3 bars like so: .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } Modification RESOLUTION .navbar- ...

Replacing the left styling using CSS

Struggling to adjust the position of a side panel that pops up when hovering over an option. This is the code I found in Chrome Developer Tools: <nav id= "side_nav" class= "sidebar-bg-color header-side-nav-scroll-show"> <ul ...

Tips for refreshing the 'state' of an Angular Router component

I'm facing an issue with passing data between pages using Angular routing. Everything works as expected when navigating to the "next" page for the first time. However, upon returning to the home page and selecting a different item, the Router's s ...

Utilizing Ajax: Sending Customized Data to a Modal

Having never worked with jquery before, I struggled to find a solution for my specific case. On the cockpit.php page, I have a form that retrieves content from a mysql database. Currently, I am able to display this content in a div on the same cockpit.php ...

How can you avoid an abrupt transition when using `ng-hide` for animations?

I've been working on an accordion animation using ng-hide based on the panels height. However, I've noticed a slight jump when the ng-hide is applied. (click on the first title to show and hide) Can anyone offer assistance in resolving this issu ...

The issue with the stretched-link in Bootstrap 5 is that it is not functioning properly when used with a

I'm having a small issue with the stretched-link feature not working properly with my card. Despite trying everything from the Bootstrap documentation, including removing buttons as they are said to not work well with stretched-links, I still can&apos ...

Clear out any unnecessary white space beneath the content on your webpage

I am relatively new to Web Development and currently following Colt Steele's udemy course. I have been working on a landing page, but as I try to set the height of HTML to 100%, it leaves whitespace at the bottom. After some research, I suspect that t ...

Exploring a GitHub image repository with HTML loops

I need assistance with incorporating a gallery into my GitHub pages website. Within my username.github.io directory, I have an assets/images folder containing various images that I want to display by looping through them. After searching for a solution, I ...

Styling Scrollbars in Datatables

I need assistance on styling a specific datatable scrollbar using Webkit. Below is the code snippet: id ::-webkit-scrollbar-track { background-color: transparent; border-radius: 5px; } id::-webkit-scrollbar { width: 13px; } ...

Tips for positioning div elements with css tables

Is it possible to align the div elements in such a way that the first column element spans two rows, while the second column elements are stacked on top of each other using CSS tables? Below is a snippet of my HTML code: <html> <head><link ...

The HTML unit is unable to locate the form for unknown reasons. My suspicion is that it could be due to the presence of Angular

Struggling with using HTMLunit to login and upload a file. Successfully logged in but unable to locate the form, despite it being present on the HTML page. Here is the JAVA CODE snippet: public static void main(String[] args) { WebClient webClient = ...

Eliminate the see-through effect from a logo positioned in a fading container

I created a div with image fading functionality using JavaScript and placed a static SVG logo on top of it. The issue I'm facing is that the logo appears somewhat transparent, allowing the image in the div to show through. Despite adjusting the z-inde ...

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...