Border-radius not being honored working with bootstrap and angular-material

0
votes

Some Context

I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.

If this is a terrible idea, please let me know.

My Problem

The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.

To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.

Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?

And any feedback about using angular-material + bootstrap together is also much appreciated.

1
cssangularjstwitter-bootstrapangular-material
For some reason, the md-sidenav overflow: auto overrides the elements inside it. - harrypujols
Hmm ok, thanks for the help. I'll investigate that a bit more. - shieldstroy

1 Answers

0
votes

I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.

So in your case you could do:

.avatar svg {
  border-radius: 50%;
}