Width of the fields when grouping

[ColadaFF]

Hi there,

I tried to use the material templates, but when I try to use it grouping fields to get like 3 fields in the same row, I don't see how can I set the width for the fields, so when it renders, I get this:

and this is my configuration:

{
                elementAttributes: {
                    "layout": "row"
                },
                fieldGroup: [
                    {
                        key: 'existId',
                        type: 'select',
                        templateOptions: {
                            label: "¿Presenta documento de identificación?",
                            placeholder: 'Seleccione..',
                            options: [
                                {key: 'default', value: labelsContact.options.defaultSelect},
                                {key: '1', value: labelsContact.options.yes},
                                {key: '2', value: labelsContact.options.no},
                                {key: '3', value: labelsContact.options.process}
                            ],
                            valueProp: 'key',
                            labelProp: 'value',
                            "required": true

                        },
                        validators: selectDefaultValidator
                    },
                    {
                        key: 'idType',
                        type: 'select',
                        templateOptions: {
                            label: "",
                            placeholder: 'Seleccione..',
                            options: [],
                            valueProp: 'key',
                            labelProp: 'value',
                            "required": true
                        }
                    },
                    {
                        key: 'idNumber',
                        type: 'input',
                        templateOptions: {
                            label: labelsContact.fields.idNumber,
                            "required": true
                        }
                    }
                ]
            }

How can I handle this with material templates?

Thanks.

[kamilkisiela]

@ColadaFF I'm going to look it up in few days.

[kamilkisiela]

@ColadaFF Take a look at this http://angular-formly.com/#/example/other/advanced-layout-flex

I prepared playground of your example.
http://codepen.io/kamilkisiela/pen/mVqjZP

The problem is related to ngMaterial.
<md-input-container> has two children: <label> and <md-select>.
<label> (which contains templateOptions.label) has the same width as <select>.
So you can try to add custom css.

[jmls]

I have a similar problem :
http://codepen.io/anon/pen/JGxLGr

how do I make field1 50% and field2 50% of the width ?

[jmls]

anyone got any ideas ?

[jmls]

ok, 17 days without any response on this or another question - so I have to ask - is this project dead ? If so, please just say so that we don't waste time evaluating this.

[kamilkisiela]

@jmls It's not dead. I've got lot of stuff happening but now I'm back.

ngMaterial changed something in css so it has to be fixed now. I'm going to work on it at the end of today.

[jmls]

you da man ;) thanks