The Tag restricts the width of the form and doesn't match the width of the container

0

I am editing a form using Angular, but it doesn't work well. When I was debugging it using the Chrome dev tool, I found out that the mat-form-field restricts the width of the input area, and I didn't put any CSS code to specify the width.

The width of form and p tag: 460, the width of mat-form-field: 180. I didn't put any style to the code except for the container part.

<div class="container"

fxLayout="row"

fxLayout.sm="column"

fxLayout.xs="column"

fxLayoutAlign.gt-md="space-around center"

fxLayoutGap="20px" 

fxLayoutGap.xs="0">



<div fxFlex *ngIf="dish">

...

</div>



<div fxFlex *ngIf="dish" class="full-width">

    <h3>

      <b>Comments</b>

    </h3>

    <mat-list *ngIf="dish.comments">

        <mat-list-item *ngFor="let comment of dish.comments">

          <p matline>

          <span>{{comment.comment}}<br></span>

          <span>{{comment.rating}} Stars<br></span>

          <span>-- {{comment.author}} {{comment.date | date}}</span>

          </p>

      </mat-list-item>

    </mat-list>



    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">

    <p>

      <mat-form-field>

        <input matInput formControlName="name" placeholder="name" type="text" required>

        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>

      </mat-form-field>

    </p>

    <p>

      <mat-slider thumbLabel tickInterval="1" min="0" max="5" value="5"></mat-slider>

    </p>

    <p>

      <mat-form-field>

        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>

        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>

      </mat-form-field>

    </p>

      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="!commentForm.valid">Submit</button>

  </form>

</div>



<div [hidden]="dish">

  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>

</div>

I want to match the mat-form-field width to the form width, from 180 to 460. How can I do that?

angular html5 angular-material

share|improve this question

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

add a comment | 

0

I am editing a form using Angular, but it doesn't work well. When I was debugging it using the Chrome dev tool, I found out that the mat-form-field restricts the width of the input area, and I didn't put any CSS code to specify the width.

The width of form and p tag: 460, the width of mat-form-field: 180. I didn't put any style to the code except for the container part.

<div class="container"

fxLayout="row"

fxLayout.sm="column"

fxLayout.xs="column"

fxLayoutAlign.gt-md="space-around center"

fxLayoutGap="20px" 

fxLayoutGap.xs="0">



<div fxFlex *ngIf="dish">

...

</div>



<div fxFlex *ngIf="dish" class="full-width">

    <h3>

      <b>Comments</b>

    </h3>

    <mat-list *ngIf="dish.comments">

        <mat-list-item *ngFor="let comment of dish.comments">

          <p matline>

          <span>{{comment.comment}}<br></span>

          <span>{{comment.rating}} Stars<br></span>

          <span>-- {{comment.author}} {{comment.date | date}}</span>

          </p>

      </mat-list-item>

    </mat-list>



    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">

    <p>

      <mat-form-field>

        <input matInput formControlName="name" placeholder="name" type="text" required>

        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>

      </mat-form-field>

    </p>

    <p>

      <mat-slider thumbLabel tickInterval="1" min="0" max="5" value="5"></mat-slider>

    </p>

    <p>

      <mat-form-field>

        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>

        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>

      </mat-form-field>

    </p>

      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="!commentForm.valid">Submit</button>

  </form>

</div>



<div [hidden]="dish">

  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>

</div>

I want to match the mat-form-field width to the form width, from 180 to 460. How can I do that?

angular html5 angular-material

share|improve this question

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

add a comment | 

0

0

0

I am editing a form using Angular, but it doesn't work well. When I was debugging it using the Chrome dev tool, I found out that the mat-form-field restricts the width of the input area, and I didn't put any CSS code to specify the width.

The width of form and p tag: 460, the width of mat-form-field: 180. I didn't put any style to the code except for the container part.

<div class="container"

fxLayout="row"

fxLayout.sm="column"

fxLayout.xs="column"

fxLayoutAlign.gt-md="space-around center"

fxLayoutGap="20px" 

fxLayoutGap.xs="0">



<div fxFlex *ngIf="dish">

...

</div>



<div fxFlex *ngIf="dish" class="full-width">

    <h3>

      <b>Comments</b>

    </h3>

    <mat-list *ngIf="dish.comments">

        <mat-list-item *ngFor="let comment of dish.comments">

          <p matline>

          <span>{{comment.comment}}<br></span>

          <span>{{comment.rating}} Stars<br></span>

          <span>-- {{comment.author}} {{comment.date | date}}</span>

          </p>

      </mat-list-item>

    </mat-list>



    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">

    <p>

      <mat-form-field>

        <input matInput formControlName="name" placeholder="name" type="text" required>

        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>

      </mat-form-field>

    </p>

    <p>

      <mat-slider thumbLabel tickInterval="1" min="0" max="5" value="5"></mat-slider>

    </p>

    <p>

      <mat-form-field>

        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>

        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>

      </mat-form-field>

    </p>

      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="!commentForm.valid">Submit</button>

  </form>

</div>



<div [hidden]="dish">

  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>

</div>

I want to match the mat-form-field width to the form width, from 180 to 460. How can I do that?

angular html5 angular-material

share|improve this question

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

I am editing a form using Angular, but it doesn't work well. When I was debugging it using the Chrome dev tool, I found out that the mat-form-field restricts the width of the input area, and I didn't put any CSS code to specify the width.

The width of form and p tag: 460, the width of mat-form-field: 180. I didn't put any style to the code except for the container part.

<div class="container"

fxLayout="row"

fxLayout.sm="column"

fxLayout.xs="column"

fxLayoutAlign.gt-md="space-around center"

fxLayoutGap="20px" 

fxLayoutGap.xs="0">



<div fxFlex *ngIf="dish">

...

</div>



<div fxFlex *ngIf="dish" class="full-width">

    <h3>

      <b>Comments</b>

    </h3>

    <mat-list *ngIf="dish.comments">

        <mat-list-item *ngFor="let comment of dish.comments">

          <p matline>

          <span>{{comment.comment}}<br></span>

          <span>{{comment.rating}} Stars<br></span>

          <span>-- {{comment.author}} {{comment.date | date}}</span>

          </p>

      </mat-list-item>

    </mat-list>



    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">

    <p>

      <mat-form-field>

        <input matInput formControlName="name" placeholder="name" type="text" required>

        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>

      </mat-form-field>

    </p>

    <p>

      <mat-slider thumbLabel tickInterval="1" min="0" max="5" value="5"></mat-slider>

    </p>

    <p>

      <mat-form-field>

        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>

        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>

      </mat-form-field>

    </p>

      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="!commentForm.valid">Submit</button>

  </form>

</div>



<div [hidden]="dish">

  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>

</div>

I want to match the mat-form-field width to the form width, from 180 to 460. How can I do that?

angular html5 angular-material

angular html5 angular-material

share|improve this question

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

share|improve this question

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

share|improve this question

share|improve this question

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

asked Jan 2 at 1:29

Z.RichardZ.Richard

65110

65110

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

0

Apply a width: 100% to the mat-form-field element; that will cause it to match the width of its parent. You might need to play around a little with the styling of the containing elements to get the exact look you want.

share|improve this answer

answered Jan 6 at 7:00

codequietcodequiet

42115

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000279%2fthe-mat-form-field-tag-restricts-the-width-of-the-form-and-doesnt-match-the-w%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

Apply a width: 100% to the mat-form-field element; that will cause it to match the width of its parent. You might need to play around a little with the styling of the containing elements to get the exact look you want.

share|improve this answer

answered Jan 6 at 7:00

codequietcodequiet

42115

add a comment | 

0

Apply a width: 100% to the mat-form-field element; that will cause it to match the width of its parent. You might need to play around a little with the styling of the containing elements to get the exact look you want.

share|improve this answer

answered Jan 6 at 7:00

codequietcodequiet

42115

add a comment | 

0

0

0

Apply a width: 100% to the mat-form-field element; that will cause it to match the width of its parent. You might need to play around a little with the styling of the containing elements to get the exact look you want.

share|improve this answer

answered Jan 6 at 7:00

codequietcodequiet

42115

Apply a width: 100% to the mat-form-field element; that will cause it to match the width of its parent. You might need to play around a little with the styling of the containing elements to get the exact look you want.

share|improve this answer

answered Jan 6 at 7:00

codequietcodequiet

42115

share|improve this answer

share|improve this answer

answered Jan 6 at 7:00

codequietcodequiet

42115

answered Jan 6 at 7:00

codequietcodequiet

42115

answered Jan 6 at 7:00

codequietcodequiet

42115

42115

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000279%2fthe-mat-form-field-tag-restricts-the-width-of-the-form-and-doesnt-match-the-w%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here