How to expand child component height to parent heightAngular 2 passing value between componentsAngular simple footer issue (with ngFor loop in child component)Flexbox-Layout with Angular-ComponentsPartial accordion-style animation on Angular component with various templatesImplemented a fixed header but the content is scrolling over the headerFixed header using angular material and flex layoutAlign mat-cards content (image, text and buttons)how to make a similar [mat-dialog-close] in a div?How to increase the count individually?Angular Flex Layout: Holy Grail Design
Will the volt, ampere, ohm or other electrical units change on May 20th, 2019?
Why are goodwill impairments on the statement of cash-flows of GE?
How could it be that 80% of townspeople were farmers during the Edo period in Japan?
Would life always name the light from their sun "white"
Meaning of "legitimate" in Carl Jung's quote "Neurosis is always a substitute for legitimate suffering."
Polynomial division: Is this trick obvious?
Why are lawsuits between the President and Congress not automatically sent to the Supreme Court
Is a "local" version of 3-SAT NP-hard?
Understanding Deutch's Algorithm
Six inch, clear plastic binary counting puzzle
What do the "optional" resistor and capacitor do in this circuit?
My bread in my bread maker rises and then falls down just after cooking starts
Getting a similar picture (colours) on Manual Mode while using similar Auto Mode settings (T6 and 40D)
Formal Definition of Dot Product
Why were the bells ignored in S8E5?
What is the effect of the Feeblemind spell on Ability Score Improvements?
Computing a series sum
Did any "washouts" of the Mercury program eventually become astronauts?
Variance and covariance inequality
Were any of the books mentioned in this scene from the movie Hackers real?
Is my test coverage up to snuff?
Capital gains on stocks sold to take initial investment off the table
How to continually let my readers know what time it is in my story, in an organic way?
Why did Varys remove his rings?
How to expand child component height to parent height
Angular 2 passing value between componentsAngular simple footer issue (with ngFor loop in child component)Flexbox-Layout with Angular-ComponentsPartial accordion-style animation on Angular component with various templatesImplemented a fixed header but the content is scrolling over the headerFixed header using angular material and flex layoutAlign mat-cards content (image, text and buttons)how to make a similar [mat-dialog-close] in a div?How to increase the count individually?Angular Flex Layout: Holy Grail Design
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have a card component that uses flex-layout. I want to extend the height to the size of the parent component height. Here is the card html
<div
gdAreas="header header | side content | footer footer"
gdGap="16px"
gdRows="auto auto auto"
gdAreas.lt-md="header | side | content | footer"
gdRows.lt-md="auto auto auto auto"
>
<div class="header" gdArea="header">
<p>
Buy and sell good stocks using conservative indicators.
</p>
</div>
<div class="side" gdArea="side">
<p>
side </p>
</div>
<div class="content" gdArea="content">
<button mat-button color="basic">Try </button>
</div>
<div class="footer" gdArea="footer">
Footer
</div>
</div>
This is the parent component html:
<app-nav></app-nav>
<div
fxLayoutGap="32px"
fxLayoutAlign="flex-start">
<!-- dummy loop -->
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlex="100%"
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
</ng-container>
</div>
<router-outlet></router-outlet>
Currently the card component takes up one third of the app parent component.
angular angular-flex-layout asked Mar 23 at 15:33
Tony1957Tony1957
8118
add a comment |
I have a card component that uses flex-layout. I want to extend the height to the size of the parent component height. Here is the card html
<div
gdAreas="header header | side content | footer footer"
gdGap="16px"
gdRows="auto auto auto"
gdAreas.lt-md="header | side | content | footer"
gdRows.lt-md="auto auto auto auto"
>
<div class="header" gdArea="header">
<p>
Buy and sell good stocks using conservative indicators.
</p>
</div>
<div class="side" gdArea="side">
<p>
side </p>
</div>
<div class="content" gdArea="content">
<button mat-button color="basic">Try </button>
</div>
<div class="footer" gdArea="footer">
Footer
</div>
</div>
This is the parent component html:
<app-nav></app-nav>
<div
fxLayoutGap="32px"
fxLayoutAlign="flex-start">
<!-- dummy loop -->
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlex="100%"
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
</ng-container>
</div>
<router-outlet></router-outlet>
Currently the card component takes up one third of the app parent component.
angular angular-flex-layout asked Mar 23 at 15:33
Tony1957Tony1957
8118
So what did you expect when you addedfxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)"?
– callback
Mar 23 at 15:42
@callback I changed it to 100%. No difference
– Tony1957
Mar 23 at 16:12
add a comment |
I have a card component that uses flex-layout. I want to extend the height to the size of the parent component height. Here is the card html
<div
gdAreas="header header | side content | footer footer"
gdGap="16px"
gdRows="auto auto auto"
gdAreas.lt-md="header | side | content | footer"
gdRows.lt-md="auto auto auto auto"
>
<div class="header" gdArea="header">
<p>
Buy and sell good stocks using conservative indicators.
</p>
</div>
<div class="side" gdArea="side">
<p>
side </p>
</div>
<div class="content" gdArea="content">
<button mat-button color="basic">Try </button>
</div>
<div class="footer" gdArea="footer">
Footer
</div>
</div>
This is the parent component html:
<app-nav></app-nav>
<div
fxLayoutGap="32px"
fxLayoutAlign="flex-start">
<!-- dummy loop -->
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlex="100%"
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
</ng-container>
</div>
<router-outlet></router-outlet>
Currently the card component takes up one third of the app parent component.
angular angular-flex-layout asked Mar 23 at 15:33
Tony1957Tony1957
8118
I have a card component that uses flex-layout. I want to extend the height to the size of the parent component height. Here is the card html
<div
gdAreas="header header | side content | footer footer"
gdGap="16px"
gdRows="auto auto auto"
gdAreas.lt-md="header | side | content | footer"
gdRows.lt-md="auto auto auto auto"
>
<div class="header" gdArea="header">
<p>
Buy and sell good stocks using conservative indicators.
</p>
</div>
<div class="side" gdArea="side">
<p>
side </p>
</div>
<div class="content" gdArea="content">
<button mat-button color="basic">Try </button>
</div>
<div class="footer" gdArea="footer">
Footer
</div>
</div>
This is the parent component html:
<app-nav></app-nav>
<div
fxLayoutGap="32px"
fxLayoutAlign="flex-start">
<!-- dummy loop -->
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlex="100%"
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
</ng-container>
</div>
<router-outlet></router-outlet>
Currently the card component takes up one third of the app parent component.
angular angular-flex-layout angular angular-flex-layout asked Mar 23 at 15:33
Tony1957Tony1957
8118
asked Mar 23 at 15:33
Tony1957Tony1957
8118
edited Mar 23 at 16:12
Tony1957
asked Mar 23 at 15:33
Tony1957Tony1957
8118
asked Mar 23 at 15:33
Tony1957Tony1957
8118
asked Mar 23 at 15:33
Tony1957Tony1957
8118
8118
So what did you expect when you addedfxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)"?
– callback
Mar 23 at 15:42
@callback I changed it to 100%. No difference
– Tony1957
Mar 23 at 16:12
add a comment |
So what did you expect when you addedfxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)"?
– callback
Mar 23 at 15:42
@callback I changed it to 100%. No difference
– Tony1957
Mar 23 at 16:12
So what did you expect when you added
fxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)"?– callback
Mar 23 at 15:42
So what did you expect when you added
fxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)"?– callback
Mar 23 at 15:42
@callback I changed it to 100%. No difference
– Tony1957
Mar 23 at 16:12
@callback I changed it to 100%. No difference
– Tony1957
Mar 23 at 16:12
add a comment |
1 Answer
1
active
oldest
votes
you can add fxFlexFill to fill the height of the parent
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlexFill // here
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
you could try 100vh instead of 100% too
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
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
);
);
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
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55315386%2fhow-to-expand-child-component-height-to-parent-height%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
you can add fxFlexFill to fill the height of the parent
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlexFill // here
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
you could try 100vh instead of 100% too
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
add a comment |
you can add fxFlexFill to fill the height of the parent
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlexFill // here
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
you could try 100vh instead of 100% too
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
add a comment |
you can add fxFlexFill to fill the height of the parent
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlexFill // here
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
you could try 100vh instead of 100% too
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
you can add fxFlexFill to fill the height of the parent
<ng-container *ngFor="let _ of [1]">
<app-card
fxFlexFill // here
fxFlex.lt-md="100%"
fxFlex.lt-sm="100%"
></app-card>
you could try 100vh instead of 100% too
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
answered Mar 23 at 17:06
Fateh MohamedFateh Mohamed
6,62421629
6,62421629
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.
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
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55315386%2fhow-to-expand-child-component-height-to-parent-height%23new-answer', 'question_page');
);
Post as a guest
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
So what did you expect when you added
fxFlex="0 1 calc(100% - 32px)" fxFlex.lt-md="0 1 calc(50% - 32px)"?– callback
Mar 23 at 15:42
@callback I changed it to 100%. No difference
– Tony1957
Mar 23 at 16:12