Sizes not adjusting properly

[jt-helsinki]

Hi,

I am trying to create a layout that is 400px wide for use inside an <md-dialog>.

<form role="form" (ngSubmit)="authorize(loginForm)" novalidate  #loginForm="ngForm">
        <div fxLayout="row"> 
            <h3>Enter Login Credentials</h3>
        </div>
        <div fxLayout="row"> 
            <p class="validation-message" *ngIf="authorisationErrorMessage">{{authorisationErrorMessage}}</p>
        </div>
        <div fxLayout="row">
            <div fxFlex="400px" fxFlex.gt-xs="400px" fxFlex.xs="300px">
                <md-input-container class="fullwidth"> 
                    <input md-input 
                        name="licenceNumber"
                        placeholder="Licence Number" >   
                </md-input-container>
            </div>
        </div>
        <div fxLayout="row">
            <div fxFlex="400px" fxFlex.xs="300px">
                <md-input-container class="fullwidth"> 
                    <input md-input 
                        name="email"
                        placeholder="Email">       
                </md-input-container> 
            </div> 
        </div>
        <div fxLayout="row">
            <div fxFlex="400px" fxFlex.xs="300px">
                <md-input-container class="fullwidth"> 
                    <input md-input 
                        name="plainPassword"
                        placeholder="Password"
                        type="password">     
                </md-input-container>
            </div>  
        </div>
        <div fxLayout="row">
            <div fxFlex="400px" fxFlex.xs="300px">
                <button md-raised-button color="primary" type="submit">Login</button>
            </div>
        </div> 
</form>

In this case I am expecting a form that is 400px wide yet when I measure it is only 320px. It appears as if the dimensions for the layout are being ignored. Can this be considered a bug or am I doing something wrong here?

JT

[ThomasBurleson]

@paistipoikka -

• Please provide a Plunkr demonstrating this issue. Here is a Material+Flex-Layout Template
• When using the directives, the default (non-responsive version is always the fallback). so

<div fxFlex="400px" fxFlex.gt-xs="400px" fxFlex.xs="300px">

could instead be:

<div fxFlex="400px" fxFlex.xs="300px">

[jt-helsinki]

Try this one:

https://plnkr.co/edit/ea51R3?p=preview

[jt-helsinki]

@ThomasBurleson

Also seems that this applies to the height as well which I've added.

Also I've added fxLayoutAlign and fxAlign. I think there are problems here too.

[ThomasBurleson]

This is an issue with mdDialog and the cdk-overlay-pane. Please report on the Material 2 repos with a new Angular Material 2 issue.

Closing as this does not appear to be a Flex-Layout issue.

[ThomasBurleson]

@paistipoikka - Here are two (2) important guidelines for investigating a Layout issue:

• If you cannot get Flex-Layout to work with an example, try to manually use CSS flexbox stylings. If that still does not work to achieve your goals, then Flex-Layout is not the issue.
• If hand-crafted CSS resolves the issue, but Flex-Layout does not then we definitely have a bug in this repository.

[jt-helsinki]

@ThomasBurleson Thanks for that. Seems Material 2 has a couple of little CSS problems like this.

[ThomasBurleson]

So if you add CSS to the Plunkr Demo

form  div[fxFlex="400px"] {  
  min-width:400px;
}

it definitely seems to work better. @crisbeto - Per your question on Issue 2446, I will investigate... as I must test for regression issues with such a change.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}