Angular Material's Expansion Panel Alignment

I am currently facing an issue with aligning the icon to the left side of the expansion panel and centering the title. I've tried using CSS with text-align but it's not working as expected. Any advice or suggestions would be greatly appreciated, thank you.

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title >
        <app-icon-button></app-icon-button>
        {{title}}
      </mat-panel-title>
      <!-- <mat-panel-description></mat-panel-description> -->
    </mat-expansion-panel-header>
    <p>hello</p>
  </mat-expansion-panel>
</mat-accordion>
cssangularangular-materialangular13

Answer №1

Here is an example of how you can achieve this:

 <mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title class="panelTitle">
        <app-icon-button></app-icon-button>
        {{title}}
      </mat-panel-title>
      <!-- <mat-panel-description></mat-panel-description> -->
    </expansion-panel-header>
    <p>hello</p>
  </mat-expansion-panel>
</mat-accordion>

Don't forget to add the following styles to your .scss file:

.panelTitle{
    display:flex;
    flex-direction:row;
    align-items:center;
    }

If the styles are still not applied, consider adding 

encapsulation:viewEncapsulation.None
to the component decorator.

I hope this solution works for you!

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

On three out of five pages, Mozilla Firefox and Internet Explorer are causing extra spacing in my navigation section, yet not on every page

I've been troubleshooting my website and can't seem to pinpoint the issue. I have 5 pages all connected to the same CSS file and created in a consistent manner. Interestingly, Safari, Chrome, and Opera display everything correctly. However, in Fi ...

csspadding

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

I can see that the autocomplete feature is working in the example provided, but it's not functioning properly in my attempt. What could be causing this issue? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> & ...

javascriptjquerycssjquery-ui

How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignme ...

csszurb-foundation

Exploring different ways to customize the grid style in Angular 6

Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...

cssangulargrid

Gridster2 for Angular: Resolving Overlapping Grid Items during Drag

The Angular version being used is 4.0.0 The angular-gridster2 library version being used is 2.10.0 When dragging the items randomly over other items, they become overlapped (as shown in the image below) The circled numbers represent the number of column ...

angularoverlapangular-gridster2

Adding a code for divs into CSS caused the navigation bar to be completely obliterated

Initially, my menu was perfectly styled with the following CSS code in my css file: ul.Menu { list-style-type: none; margin: 10px; overflow: hidden; background-color: #ffffff; border-style: solid; border-color: #e9055c; border-width: 2px; font-weight: bol ...

htmlcss

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Recently, I implemented Tailwind CSS to style my application. It has been a helpful tool, but I am looking to consolidate all the CSS into one file for better organization. I want to keep it separate from the HTML code. My attempt to convert the following ...

cssreactjstailwind-css

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed? <span class="border"></span&g ...

htmlcsstwitter-bootstrapbootstrap-4

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px. However, the applied CSS sets the width to 207px for this element. The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify chang ...

csstwitter-bootstrapwidth

Exploring the application of the PUT method specific to a card ID in vue.js

A dashboard on my interface showcases various cards containing data retrieved from the backend API and stored in an array called notes[]. When I click on a specific card, a pop-up named updatecard should appear based on its id. However, I am facing issues ...

javascripthtmlcssvue.jsaxios

Tips on pre-filling a form using ngModel bindings

I have designed a Modal page where I aim to display pre-populated data to the user. Whenever the user edits the data, it should be bound to my local variable collectDataInModalPage_afterEdit. Check out the demo here:: https://stackblitz.com/edit/ionic-jse ...

angularionic3

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

htmlcsstwitter-bootstrap

"Crafting dynamic buttons with ASP.NET and CSS that adapt to various

Looking for advice on making a popup responsive. Currently experiencing an issue where the buttons go off-screen when adjusting window size, even after using percentages in CSS instead of pixels. Any suggestions? CSS: .modal { display: none; posi ...

c#cssasp.netpopupresponsive

What steps should I take to link form inputs from various child components to an array that is set in a parent component?

I'm in the process of linking form input from various child components (item-input-component) to an array itemList[] that is defined in a parent component (add-invoice-component). The goal is to gather three inputs (itemName, quantity, price), create ...

javascriptangular

CSS struggles after implementing conditional checks in return statement for an unordered list

I'm encountering a CSS issue with the header section. When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line: <div> {isAdmin(user) ? ...

javascriptcssreactjs

Creating a seamless full-page grid layout with CSS to eliminate the need for scrolling

My goal is to have 20 items on the grid of this page, each taking up full width and height with a fluid layout. Currently, I have successfully set up the page with 20 items spanning full width in a fluid design. However, the content of the grid is being p ...

htmlcsswordpressfluid-layout

The unresponsive sticky navigation bar on a Joomla website is causing issues

I recently launched a new website that can be found here. The site includes the following JavaScript code: $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; ...

javascriptcssjoomlamenusticky

Discovering a particular string within a jQuery array object: Tips and tricks

One thing that is confusing me is the jQuery array object. To explain further: I have two arrays, one called brandsLink and the other called floorLink. When a user clicks on a link, I am saving the brand name in a variable called brandName, and then checki ...

javascriptjqueryhtmlcss

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

cssvue.jsweb-componentfont-facevue-cli