0

I'm using angularjs along with the angular-material framework. I started writing my project based on the angular-seed project.

In my project I have a form that contains <md-select> elements. My problem is that the selection view is always only as big as 5 select options. I want to see more options when scrolling.

I looked around the angular-material source code and found this !default SASS variable which controls how many options are displayed. I want to make it bigger.

The way I understand it, !default means SASS will ignore the value of that variable if it's already defined elsewhere.

But I also understand that the SASS preprocessor takes a single SASS file as input and outputs a single CSS file - which means I can't override a SASS variable in one file from another file.

I'm also quite confused on which component is responsible for compiling the .scss files found in the angular-material framework and at what stage are they compiled. Are they compiled when installed by Bower? Are they compiled when I call npm start?

I'm new to all these technologies so even though those stuff might seem trivial, I don't really know what to search for to find answers to these questions, I tried and found nothing.

1 Answer 1

0

Well I just looked around and realized that the angular-material Bower package comes with css files that have already been pre-processed from scss files. There's nothing I can do to affect that variable.

To show more options in the md-select component I just resorted to the ugly solution of adding these hard-coded pre-calculated attributes to my stylesheets:

md-select-menu {
    max-height: 784px !important; }

    md-select-menu md-content {
    max-height: 784px !important; }

EDIT: Actually I found this solution even nicer:

md-select-menu {
    max-height: 100vh !important; }

    md-select-menu md-content {
    max-height: 100vh !important; }

It fills as much of the view as possible with options

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.