Menu made of Angular material card located in the upper right corner

Is there a way to add a menu at the top right of a card using Angular Material? The documentation does not mention a specific tag for this feature.

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

I am looking to include a button with an icon at the top right corner, similar to the example shown in the image above.

    <mat-card class="custome-card">
    <a [routerLink]="['/products/123']">
        <img mat-card-image
            src="https://wonderfulengineering.com/wp-content/uploads/2013/12/Lamborghini-wallpaper-14.jpg"
            alt="Photo of a Shiba Inu">
    </a>
    <mat-card-content>
        <a [routerLink]="['/products/123']" class="productDetail"><span
                class="mat-subheading-2">Lamborghini Aventador</span></a><br>
        <span>NRs 1 - 2 Crore</span><br>
        <strong>Size: </strong> <span>XL L M S XS</span>
    </mat-card-content>
    <mat-card-actions>
        <div fxLayout="row" fxLayoutAlign="center">
            <falcon-button [field]="favoriteBtnConfig"></falcon-button>&nbsp;
            <falcon-button [field]="shareBtnConfig"></falcon-button>&nbsp;
            <falcon-button [field]="shopCartBtnConfig"></falcon-button>
        </div>
    </mat-card-actions>
</mat-card>

The code above will display the image as shown below:

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

htmlcssangularangular-materialangular10

Answer №1

This resolves the problem

 .custom-card__menu {
        position: fixed;
        right: 20px;
        top: 20px;
    }

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

Tips for adding page numbers to a PDF created from HTML using wkhtmltopdf

Our response: We currently utilize wkhtmltopdf for generating PDFs from a specified html template. A brief overview: We incorporate Sulu CMF in constructing our backend, which is built on Symfony2. The KnpSnappy Bundle acts as a Symfony wrapper for wkht ...

javascripthtmlsymfonypdfpdf-generation

Transitioning a JavaScriptIonicAngular 1 application to TypescriptIonic 2Angular 2 application

I am currently in the process of transitioning an App from JavaScript\Ionic\Angular1 to Typescript\Ionic2\Angular2 one file at a time. I have extensively researched various guides on migrating between these technologies, completed the A ...

javascripttypescriptionic-frameworkangularionic2

Incorrect Tooltip DisplayWhat could be causing the issue with

I am facing an issue when trying to add a tooltip to a glyphicon within a tile. It doesn't seem to work correctly when it should. However, placing the tooltip outside of the tile works fine. I'm quite perplexed and would greatly appreciate any as ...

javascriptjqueryhtmljquery-ui-tooltip

How can we simultaneously execute multiple HTTP requests in Angular 6 by leveraging the power of forkJoin and ngrx?

Current Situation In the realm of my angular6 application, I find myself juggling three distinct categories: catA, catB, and catC. Each of these categories requires data retrieval from 3 separate APIs. Upon selecting any category, the CategoryDetailsCompo ...

angularrxjsangular6rxjs6ngrx-effects

What is the best way to extract the image tag from HTML code and use it as the image source in Glide for images

I recently came across a method to extract image links from HTML img tags using the Html Java library. It requires using the fromHtml method. After pulling some HTML code from an RSS feed, I wanted to display the images it contained. The code snippet belo ...

javaandroidhtml

The rules for prioritizing CSS selectors

Struggling with CSS selector rules and specificity? I've already checked this for specifics. Even tried using firebug and inspecting elements in Chrome to copy the CSS path, but still can't get it to work. This is my first time creating a website ...

htmlcsstwitter-bootstrap

Issue with CSS rendering in Internet Explorer

Although my website appears perfectly in Firefox, the entire style sheet doesn't seem to load properly in IE 7. It's only displaying certain styles. Any assistance on this issue would be greatly appreciated! ...

htmlcss

Updating the input value of one field by typing into another field is not functioning properly when trying to do so for

I'm managing a website with a form that has three fields which can be duplicated on click. Here is an excerpt of my code: $(document).ready(function() { var max_fields = 10; var wrapper = $(".container1"); var add_button = $("#niy"); var ...

javascripthtmljqueryinput

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters. The search re ...

javascriptjquerycssajaxvb.net

Retrieving text content from an HTML tag using C#

I'm working with a variable that contains the following tag. My goal is to extract the values of type and id into separate variables using C#. What is the most effective approach to accomplish this task? <a href="gana:$type=FlexiPage;id=c828c4ea- ...

c#html

Iterating over elements with a custom width using ngFor in Bootstrap

I'm currently using *ngFor to cycle through multiple images as the background of each column in a row using Bootstrap. One thing I'm wondering is how to control the width of each column. For example, if I have 10 images, how can I adjust the widt ...

angularbootstrap-4

I utilized Bootstrap to validate the form, however, despite the validation, the form is still able to be submitted. What steps can I take to

I have implemented form validation using Bootstrap's 'needs-validation'. However, I am facing an issue where the form still gets submitted even when the validation fails. What I want is for the form submission to be prevented if the validati ...

javascriptjqueryhtmljinja2

Implementing Ahead of Time compilation in Angular 2 alongside lazy loading, all achieved without Angular CLI

Working on a straightforward Angular 2 application without utilizing the Angular CLI. The site functions flawlessly when using the JIT compiler, running eager loaded and lazy loaded modules smoothly. After successfully running the AOT compiler followed by ...

angularlazy-loadingangular2-aot

What is the best way to align the items in my navigation bar to the center?

I'm having trouble getting my navbar buttons to appear in the center of the navigation bar. No matter what I try, they only seem to align to the left or right. Can anyone help me figure out how to center them? Here's the CSS code I'm working ...

htmlcssbootstrap-4

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

javascripthtmljson

Implementing real-time database updates in FullCalendar Angular when events are dragged and resized

I have integrated fullcalendar into my Angular project and successfully retrieved data from my API to display events: @Component({ selector: 'app-installboard', templateUrl: './installboard.component.html', styleUrls: ['./in ...

angularcallbackscopefullcalendar

displaying the name of the current admin center on the header

In my project, the admin registers an account with a center name. However, when they log in and see the admin page on the header, I need to display the center name that was registered for the current logged-in admin. Unfortunately, I have no idea how to ac ...

node.jsangularmongooseangular-materialmean-stack

The usage of @Inject('Window') in Angular/Jasmine leads to test failures, but removing it results in code failures

Currently, I am encountering a dilemma related to using Angular's @Inject('Window') within a web API service. This particular issue arises when the Window injection is utilized in the service constructor, leading to test spec failures in the ...

angulartypescriptjasminekarma-jasmine

Angular 2: Harnessing the power of dynamic backlinks on landing pages!

I am facing an issue with my Angular 2 item page. When a user lands on the page via a deep link, the Location.back() function does not work as there is no history in the Location object. To address this, I attempted to use a workaround where if the back() ...

javascripttypescriptangular

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap