1

I am trying to make a custom mat-select style. So far I made everything except the span that shows the selected value. I am talking about mat-select-min-line and mat-select-value-text elements.

This is what I have done for now

enter image description here This is what I have done for now

enter image description here This is how elements should look

In mat-select, elements are nested like this:

<div class="mat-select-value">
    <span class="mat-select-value-text">
        <span class="mat-select-min-line">
            Store
        </span>
    </span>
</div>

A edited the parrent class and added border, but inner two element are by size equal to the text and i cant change anything about them and cant center that text.

Sizes of thoes two elements are auto x auto by default, and if I change that, add padding, margin, nothing happens. Below is what i have tryed so far.

            .mat-select-value {
                
                text-align: center;
                height: 30px;
                
                border-radius: 100px;
                border: 1px solid $mint-500;
                
                .mat-select-value-text {
                    margin: auto !important;
                    height: 30px !important;
                    padding: 10px !important;
                    
                    .mat-select-min-line {
                        margin: auto !important;
                        height: 30px !important;
                        padding: 10px !important;
                    }
                }
                
            }

Only paading works actualy, bit it does not affect it. I also tryed all this directly through site inspector an nothing is working.

NOTE: I am using SCSS

Josip Maričević
  • 189
  • 3
  • 18

1 Answers1

0

Try adding your style of mat-select in index.html of Angular app, and if you are adding in specific component then use ::ng-deep before CSS.

Example:

::ng-deep .xyz{
//all your css
}
Shruti Jain
  • 3
  • 3
  • I did not add any of thoes elements, they are all in the angular material mat-select component. I just showed how it looks after being displayed on-page. I just used mat-select, and mat-option components – Josip Maričević Feb 03 '22 at 09:55
  • Edited. Sorry, read wrong. – Shruti Jain Feb 03 '22 at 10:08
  • It is not applying, I tried it. The parent element `mat-select-value` has display `table-cell`. If I change it to something other, it disappears, but if I set it as `display: table`, then I can make some minor changes. – Josip Maričević Feb 03 '22 at 10:26
  • I was having the same issue, and this worked for me. Thanks! Not sure why it's not working for you Josip – Jordan9232 Oct 07 '22 at 15:38