CODEWITHSUNDEEP
htmlcssangularangular-materialmaterial-design
Shawn Spencer
Shawn Spencer

Reputation: 1460

Fix position in IE for mat-expansion-indicator

So, I have looked at related posts about the Angular/Material mat-expansion-indicator, how to change its position and manipulate it in other ways with CSS. So, I was able to move it from the right to the left in the expansion panel header. I have some basic knowledge with Angular (6, 7), but I still have a lot to figure out. In IE (10/11), which I have to support for a little while longer, the mat-expansion-indicator is completely shifted out of whack. It doesn't even pretend to be lined up with the text.

IE: Expansion panel without any "IE only" CSS.

Now, I realize that some would call the following CSS work-around a hack, and I get it. However, I need to get this to work, and here's what works, for starters:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE styles here
    top: 10px !important;
}

That gives me nicely lined up carets in the expansion panel header, just like the other web browsers.

Expansion panel header in IE with IE-only CSS

As you can see from the screenshot, this works only for collapsed expansion panels. And that's where I have been stuck almost all day so far: How can I target an expanded mat-expansion-indicator with CSS? I have tried some ::after things that I have seen in other posts, but nothing seems to stick. I tried to mess with CSS transformations, but that caused all kinds of issues.

Right now, I know that the expanded mat-expansion-indicator needs to have a top position of 24px to line up decently. I just don't know how to access that expanded mat-expansion-indicator. Any ideas, anyone?

Upvotes: 0

Views: 363

Answers (1)

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

Sometimes you shouldn't do things like that with pixels. You could give the div display: flex; and then give align-items: center; This way everything is vertically centred no matter what the height of the div is.

It would look like this:

div {
   display: flex;
   align-items: center;
}

Upvotes: 2

Related Questions