Using Angular Material Flex attributes

[robinsving]

How do you use the flex attributes to make the inout fields scale automatically (according to flex nature)?

When I try to follod Ken's examples, but with angular-formly-templates-material I can't get the flex to work as intended. They instead are all given the min width, as they have here: http://formly-material.meteor.com/demo/input

Is there an example which shows how to add the flex to create an example such as in http://angular-formly.com/#/example/integrations/angular-material using this library?

Using npm:
"angular-formly": "^7.5.0",
"angular-formly-material": "^0.14.1",
"angular-material": "1.0.1",

[kamilkisiela]

Ken's example uses angular-material v0.11.x which is now out of date.

I update the example to use v1.0.1
http://jsbin.com/qukado/edit?html,output

As you can see, new version of angular-material changes everything :)

Here is a reproduction in codepen.io using angular-formly-templates-material
http://codepen.io/kamilkisiela/pen/MKGgMM

I will look at it but not in next few days. Out of free time :)

You can work on it if you want and feel free to message me so I can help you with it.

[robinsving]

Alright. Thanks for the playground.

I managed to find a workaround for this now.
Adding the following to the classNames of every fields-object works for me.

"className": "flex-100 layout-column"

This applies the layout-column to the .formly-field/.formly-field-group which means that everything inside ends up in a column. This may ruin other parts, such as ng-messages or similar, but at least it takes up the correct flex, and works with labels :)

How you'll have time to look into this soon. Since Angular Material is now 1.x.x their API should be more stable than before ;)

[kamilkisiela]

@robinsving I currently working on it.

I'm going to use a different approach and drop the support of formly's fieldGroup because of its complexity.

You can expect something to this:

{
  "type": "flex",
  "templateOptions": {
    "flex": {
      "layout": "row",
      "align": "space-between",
      "margin": true,
      "padding": true,
      "fill": true
    },
    "fields": [ ... formlyFieldConfig ]
  }
}

[captainmorgan0]

Is there any progress on adding this flex feature?

[sciborrudnicki]

@captainmorgan0 why don't you use http://angular-formly.com/#/example/other/advanced-layout-flex ?

[captainmorgan0]

Because I'm using angular material, not bootstrap. I need to add attributes to the form-field div

[sciborrudnicki]

Yeah, right, sorry. I did not check it. I am using angular-formly in my project but with my angular template material, so i will work on it.

[sciborrudnicki]

@captainmorgan0 , i checked it. Formly Field group works without BootstrapMaterial. So you can do something like this

{
    template: "<label>Birthday</label>"
},
{
    className: "flex",
    fieldGroup: [
        {
            type: "select-day",
            key: "select.birthday.day",
            templateOptions: {
                required: true
            }
        },
        {
            type: "select-month",
            key: "select.birthday.month",
            templateOptions: {
                required: true
            }
        },
        {
            type: "select-year",
            key: "select.birthday.year",
            templateOptions: {
                required: true
            }
        }
    ]
}

it will create div with .formly-field-group and ng-form so you can easly style it with css. className: flex set flex to ng-form

[whilxx]

just to say, the origin of the problem may be the angular-material css, in md-input-container element, they change display:'flex' by display:inline-block, it looks like adding width:99% to that element css works even with error messages

[wilsonsergio2500]

So how will we have this one work, exactly?
I made it work but not when it comes to too advance layouts.

i.e.

const item = <formly.IFieldGroup>{
                className: 'layout-gt-sm-row layout-column',
                fieldGroup: [
                    <formly.IFieldGroup>{
                        className: 'layout-column flex-66',
                        fieldGroup: [
                            <formly.IFieldGroup>{
                                className: 'layout-gt-sm-row layout-column',
                                fieldGroup: [FirstName, LastName]
                            }
                        ]
                    },
                    <formly.IFieldGroup>{
                        className: 'layout-column flex-33',
                        fieldGroup: [
                            Image
                        ]
                    }
                ]
            }

and

div[formly-field] {
    width: 100%;
}

The caveat here is that since material is dynamically injecting styles base on flex="??" values, this classes would not become available otherwise. It works with less complex ones nonetheless, like evenly flex

I figure I could use $mdMedia and use two templates, however, I would hate myself