align text to the right for mat-expansion-panel in material component

How can I align the description text of the mat-expansion-panel component to the right?

I attempted using 'text-align: right' in CSS but the alignment did not change. Here is my HTML:

<mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Cycle ingénieur en informatique
      </mat-panel-title>
      <mat-panel-description>
        2014-2017
      </mat-panel-description>
    </mat-expansion-panel-header>
    ....
  </mat-expansion-panel>

CSS :

mat-panel-description {
    text-align: right;
}

Here's how it currently looks:

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

I want the "2014-2017" text to remain aligned to the right.

htmlcssangularangular-material

Answer №1

The header content of the panel is contained within a flexible span element, allowing you to align the contents to the sides using flexbox properties.

Example:

<mat-expansion-panel>
<mat-expansion-panel-header class="right-aligned-header">
  <mat-panel-title>
    Computer Engineering Cycle
  </mat-panel-title>
  <mat-panel-description>
    2014-2017
  </mat-panel-description>
</mat-expansion-panel-header>

To apply this styling globally (in styles.css, not in component styles), use the following CSS:

.right-aligned-header > .mat-content {
    justify-content: space-between;
}

.mat-content > mat-panel-title, .mat-content > mat-panel-description {
  flex: 0 0 auto;
}

Check out a live Stack Blitz demo

Answer №2

After finding a solution at https://github.com/angular/components/issues/10024

.mat-expansion-panel-header-description, .mat-expansion-panel-header-title {
  Adjusting the flex-basis to 0 resolved the issue.
}

Upon revisiting the problem and analyzing it again, tweaking the CSS like this did the trick:

.mat-expansion-panel-header-description {
  Modified the display property to flex and added justify-content with a value of flex-end.
}

Answer №3

If you're looking for a simple fix, one option is to adjust the flex-grow property of the mat-panel-description:

// my.component.css

mat-panel-description.right-aligned {
  flex-grow: 0;
}

// my.component.html

...
  <mat-expansion-panel-header>
    <mat-panel-description class="right-aligned">
      2014-2017
    </mat-panel-description>
  </mat-expansion-panel-header>
...

Check out this StackBlitz example for reference.

Answer №4

For the mat-panel-description, try adding fxLayoutAlign="end". It solved the issue for me.

'<mat-panel-description fxLayoutAlign="end">
2014-2017
</mat-panel-description>'

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

Updating HTML input fields via AJAXIncorporating AJAX

Let's take a look at our database: ID Name Price 1 product1 200 2 product2 300 3 product3 400 Now, onto my form: <form action="test.php" method="post" /> <input type="text" name="search" id="search" placeholder="enter ...

phpjqueryhtmlmysqlajax

What sets apart #navlist li #current from #navlist li .current?

My quest to grasp the ins and outs of CSS continues, but tutorials I've encountered so far are only skimming the surface. I'm particularly trying to wrap my head around the fundamental variances between using #navlist li #current and #navlist li ...

htmlcsscss-selectors

React, Axios, and the PokeAPI are like a team of explorers navigating an

Trying to enhance my React abilities, I decided to follow this tutorial on creating a list of names using PokeAPI. However, I hit a roadblock at 11.35 into the tutorial while implementing the provided code snippets in both App.js and PokemonList.js: fu ...

javascripthtmlreactjspokeapi

How to display a PDF file stored in the documents directory of an iOS device with Phonegap

I'm encountering an issue when it comes to displaying a PDF using HTML, PhoneGap, or JavaScript. The web application I'm working on is developed in Sencha Touch 2. Here's exactly what I need: I need to display a PDF file located in the d ...

javascripthtmlcordovaphonegap-plugins

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

How can I prevent jQuery Explode from changing fonts during the explosion effect?

When you visit , click on any scholarship name. Then, click on the "close" button, and you will notice that while "exploding," the font changes from the default "Trebuchet MS/Trebuchet" to "Times New Roman." Despite trying to define the body as {font-famil ...

jquerycssjquery-uiexplodejquery-effects

Javascript - issue with accurately retrieving element offset value while scrolling

My goal is to dynamically change classes for elements based on their position during scrolling. I am trying to calculate the top offset element value and adjust the classes accordingly. Here is the function I am using: handleScroll () { const header = ...

javascripthtmlcss

Horizontal scrolling overflow disrupts vertical overflow visibility

I am attempting to display a container containing input elements that receive a warning bubble positioned absolutely when the input is invalid. However, the issue I am facing is that the bubble does not extend beyond the boundaries of the container as anti ...

cssoverflow

Looking to access the layout details of an HTML element similar to what can be done in Firefox's debugger tool?

I am facing a challenge with a aspx.net grid control where I need to extract the first row's information and copy it into another table using JavaScript. To achieve this, I am attempting to calculate the width of each cell in the first row by accessin ...

javascripthtmlcssasp.net

CSS changes not being reflected in different web browsers

I am facing a frustrating issue with my WordPress website as changes made in my .CSS file do not seem to reflect in Chrome, Firefox or Edge browsers. The CSS is loaded directly from the <link href="/wp-content/themes/mytheme/css/style.css" type="text/c ...

htmlcsscachingreload

Is there a way to efficiently pull specific time-related data from XML API forecasts using PHP and present them in HTML tables?

Currently, I'm facing a bit of confusion on how to obtain a forecast for the upcoming 5 days of a specific city using OpenWeather's forecast api. The challenge lies in the fact that the forecasts are provided in 3-hour intervals, but I only requi ...

phphtmlxml

The items are not displayed in the app.component.html file

I am having trouble displaying the product list in an HTML file. Despite receiving the product data in a JavaScript message, it is not showing up when I try to list it in the HTML. Can anyone assist me in resolving this issue? Below is the code snippet: im ...

angular

Guide on integrating TinyMce into an Angular 2 application

Recently I started working with Angular 2 and attempted to incorporate tinymce into my project. However, I encountered challenges in successfully implementing tinymce. Initially, I used bower to install tinyMCE and added all the necessary js files to my pr ...

angulartinymce

Make the div in jQuery clickable to redirect to the child URL

Could someone shed some light on why this code isn't functioning as expected? I'm fairly new to javascript and jQuery. Below is the snippet in question: Javascript / jQuery: <script type="text/javascript"> $('.clickk').cl ...

javascriptjqueryhtml

Dealing with the outcome of a synchronous AJAX request and displaying or concealing a div based on the result's value

I am attempting to run a JavaScript function that checks for internet connectivity status. If the user is connected to the internet, I do not want anything to happen on screen. However, if the connection is lost, I would like to display a div element. The ...

javascripthtmlcssajaxmodal-dialog

Creating an adaptable CSS triangle for an image

Is there a way to create a responsive triangle on an image that resizes properly and stays aligned? I'm currently having issues with it becoming misaligned. How can this be resolved? .image { width: 100%; } .image ...

htmlcssimagebootstrap-4css-shapes

How can one dynamically update a page in Angular when the path is changed?

I am facing a pagination issue in Angular. Here is my HTML code: <!-- A div element for pagination part at the bottom of the page --> <div style="margin-left: 50%; margin-top: 20px; margin-bottom: 20px"> <ul class="paginat ...

angulartypescriptangular10

Angular 17 isn't notifying child component of signal changes

In the statistics module, I have a signal that specifies the type of charts to display and this signal is updated through a radio button group. The signal: typeSignal = signal<string>('OIA') The radio buttons for setting the : <div clas ...

angulartypescriptangular17

When attempting to locate the clientWidth, the usage of absolute positioning can cause significant disruptions

When aiming to determine the clientWidth, certain code must be added. For example: #menuSystem a{ position: absolute; height: auto; width: auto; font-size: 15px; } To make it possible to calculate client width, the above code snippet must be included. Th ...

javascriptcss

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs