Right-align the text in the title of the material card

Why isn't the CSS aligning my title of matcard to the right?

<mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}">
  <mat-card-header>

   <mat-card-title [ngStyle]="{ 'text-align':'right' }">BLABLA</mat-card-title>

  </mat-card-header>

</mat-card>

Answer №1

If you want to create a layout like this, follow these steps:

<mat-card>
    <mat-card-header>
        <mat-card-title class="title-card-left">Left Title</mat-card-title>
        <mat-card-title class="title-card-right">Right Title</mat-card-title>
    </mat-card-header>
    <mat-card-content></mat-card-content>
</mat-card>

Next, add some styling for these classes in your CSS/SCSS file:

.title-card-right{
  display: inline;
  float: right;
}

.title-card-left{
  display: inline;
}

Lastly, include the following code in your styles.css file:

.mat-card-header-text{
  width: 100% !important;
}

Answer №2

All you need to do is implement the following code:

<mat-card style="height:100px;width:300px;display:flex;justify-content:center;align-items:center;">
   <mat-card-content><span>Contents</span></mat-card-content>
</mat-card>

Check out the STACKBLITZ DEMO for a live example

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

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

My custom CSS in React is being overshadowed by the default Bootstrap styles

View project image Currently working on a React project that requires Bootstrap. However, I am facing issues with Bootstrap overriding my custom CSS. Some default Bootstrap styles are affecting my headings. I have attempted various solutions such as placi ...

Title slide on quarto featuring a captivating full coverage background image with a sleek row of icons at the bottom

I am currently working on creating a title slide for a reveal.js presentation in Rstudio using quarto. My goal is to have a background image covering the entire slide and include one or more small icons at the bottom (specifically on this slide only). I ha ...

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

The 'books' property cannot be found on the 'client' type

I am currently integrating the Google Book API into my project and encountering an issue while trying to add a book to a library using gapi.client. The error I keep receiving is as follows: This is the request : gapi.client.books.mylibrary.bookshelves.volu ...

What could be causing my display: table-cell element to not take up the entire available space?

After consideration, I have decided to avoid using a JavaScript solution for my problem. The only way it seems to work consistently is by using setInterval() at regular intervals, which I prefer not to do. I am aware that achieving the same effect with CSS ...

Encountering an issue while attempting to make an in-app purchase with Ionic 3 and Cordova - receiving the error message "Sorry, the item you are trying to

In the process of developing my app with IONIC 3 and Angular 4, I have integrated the following Ionic plugin for in-app purchases: https://ionicframework.com/docs/native/in-app-purchase/ Once the plugin was installed, I included the "play_store_key" in t ...

display a different selection option depending on the previously chosen item

I'm working on displaying additional options in a select box when the user makes a selection from the main select box. I've set display:none for the select boxes, which will only appear when the user chooses an option from the main select box. C ...

Using Angular BehaviorSubject in different routed components always results in null values when accessing with .getValue or .subscribe

I am facing an issue in my Angular application where the JSON object saved in the service is not being retrieved properly. When I navigate to another page, the BehaviorSubject .getValue() always returns empty. I have tried using .subscribe but without succ ...

Is it possible to access the service and 'self' directly from the HTML template?

When working with Angular 6, one method to access component properties from a service is to pass 'self' to the service directly from the component. An example of this implementation is shown below: myComponent.ts public myButton; constructor(p ...

Arranging card images in a row using semantic cards for optimal alignment

Trying to create a row of semantic-ui cards with images at the top, I ran into an issue with varying image heights causing different card title positions. The goal is to have all images be the same height while still adapting to larger screens. Although I ...

Encountering a Node V18 Peer Dependency Conflict错

Can someone please help me understand what's causing this error? Every time I try to install a dependency, this keeps popping up. I'm completely lost and unsure of what's happening. npm ERR! 1 more (the root project) npm ERR! peer ...

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

What is the best way to combine a navbar with a video background?

Recently, I delved into Bootstrap and attempted to execute a code for a navbar with a video background. This is what my attempt looked like: HTML Code: <html> <head> <title>Medical</title> <meta charset="UTF-8&qu ...

Angular 13's APP_INITIALIZER doesn't wait as expected

Recently, I have been in the process of upgrading from okta/okta-angular version 3.x to 5.x and encountered an unexpected bug. Upon startup of the application, we utilized APP_INITIALIZER to trigger appInitializerFactory(configService: ConfigService), whi ...

Positioning html images to overlap each other without losing the ability to click

Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com ...

How can I make all fields in the CKAN Resource form html the same size as the "Description" field?

I am completely new to CKAN and front-end development. I've been scouring through various html/css files without success in locating where I can adjust the field sizes in the resources form (where users can modify metadata via GUI). I would like to r ...

Implement the addition of subcollections to a unified identification document in Firestore

I am struggling to store the URLs of multiple images (previously saved in Storage) in a subcollection of a Firestore document. Although I have managed to do it, each image generates a new document with its corresponding sub collection img, which is not my ...

Ways to navigate a div within an iframe that has been loaded

As I load a page(A) inside an iframe, the HTML structure of the embedded content is as follows: <html><body> <div id="div1"></div> <div id="div2"><button>Hello</button></div> </body></html> The ...

Unable to retrieve information from a Node.js server using Angular 2

I am currently learning Angular 2 and attempting to retrieve data from a Node server using Angular 2 services. In my Angular component, I have a button. Upon clicking this button, the Angular service should send a request to the server and store the respo ...