CODEWITHSUNDEEP
javascripthtmlcssangularjsangular-material
Matt Lishman
Matt Lishman

Reputation: 1817

Angular Material nested optgroups

After reading this SO question I found that it isn't possible to have nested optgroups as it's not part of the HTML5 spec. It is possible to apply styles yourself, but I would rather avoid that if it's possible in angular material.

"Under the hood" angular material swaps a lot of elements for divs and applies custom styling. Which makes me think they might handle this situation.

If I have the following code, I would expect the md-optgroup with label="Second level deep" to be indented further.

Plunker

<md-input-container>
    <md-select ng-model="vm.someModel">
        <md-optgroup label="One level deep">
            <md-option>
                One level deep
            </md-option>
        </md-optgroup>
        <md-optgroup label="Another group">
            <md-optgroup label="Second level deep">
                <md-option>Two levels deep</md-option>
            </md-optgroup>
        </md-optgroup>
    </md-select>
</md-input-container>

However, all md-optgroups are not indented and displayed the same.

This is how it currently looks:

How it actually looks

I can't see anything in the demos or docs about this (in fact they they don't have any docs for md-optgroup at all), but the docs can sometimes be out of date/incomplete.

Is it possible to have nested option groups with different indentation?

If not, what is the best way to achieve this using what is available in angular material? Should I use flex etc.

I'm trying to achieve something like this:

How I want it to look

Upvotes: 4

Views: 5760

Answers (1)

Matt Lishman
Matt Lishman

Reputation: 1817

After a bit of time to think about it, I managed to do it using flex-offset.

You can simply apply flex-offset to the md-optgroup.

I used flex-offset="5" because that looked the most sensible but any offset will work.

I added additional nesting and options to clarify the point a bit better.

Updated plunker

<md-input-container>
    <md-select ng-model="vm.someModel">
      <md-optgroup label="One level deep">
          <md-option>
              One level deep
          </md-option>
      </md-optgroup>
      <md-optgroup label="Another group">
          <md-optgroup flex-offset="5" label="Second level deep">

              <md-optgroup flex-offset="5" label="3 deep now and we want to see what happens with long text">
                <md-option>Some more options</md-option>
              </md-optgroup>

              <md-option>Two levels deep</md-option>
              <md-option>Two levels deep again</md-option>

          </md-optgroup>
      </md-optgroup>
    </md-select>
  </md-input-container>

Upvotes: 6

Related Questions