I want to do div, it has 2 different items, first one, can be shorter or longer depending on data. The second one is fixed height and it position starts when the first one ends.
The first have scroll if needed.
<div fxLayout="column" fxFlexFill>
<!-- other items -->
<div fxFlex fxLayout="column">
<div fxFlex class="scroll">
<ng-container *ngFor="let item of items">
{{item}}
</ng-container>
</div>
<div fxFlex="15%">
<button> button </button>
</div>
</div>
</div>
With this code what I get is the second div is always at bottom.
how can I do the first div have the height it needs depending on its content?
You can do this: [fxFlex]='height', where 'height' its a variable in your .ts file, you can change this height depending on the data you get.
For example, if you want that every item had height = 50px, you can make
height = items[lenght] * 50;
height = height + 'px';
Later, if you want that div don't get higher than 300px, you can add an additional step:
height = items[lenght] * 50;
if (height > 300) height = 300;
height = height + 'px';
I hope this can help you
Related
I have this
<div class="flex flex-col">
<main class="max-w-screen-lg mx-auto">...</main>
...
</div>
I use mx-auto to center main
I also want main to have some maximal width on large screen that's why I use max-w-screen-lg!
But in result margin left and right takes all space around and shrinks main to its minimal possible width on large screen
I just want main to have max width centered inside container
Some possible solution might be this, but it requires extra div
<div class="flex flex-col">
<div>
<main class="max-w-screen-lg mx-auto">...</main>
</div>
...
</div>
In my three-column Vuetify layout, I have one column that is very tall. I want only this column to have a scroll bar. However, the code below causes the entire page to overflow! Any help?
<template>
<v-container fluid class="secondary fill-height">
<v-row class="fill-height ">
<v-col class="accent rounded overflow-y-auto" cols="2">
<div class="text-center">
Lorem ipsum....super long
</div>
</v-col>
<v-col class="primary rounded" cols="5">Editor</v-col>
<v-col class="success rounded" cols="5">Stage Stuff</v-col>
</v-row>
</v-container>
</template>
Add max-height: calc(100vh - 48px) style to the div that encloses the long stuff.
<template>
<v-container fluid class="secondary fill-height">
<v-row class="fill-height">
<v-col class="accent rounded overflow-y-auto" cols="2">
<!-- Add max-height to this div so its height won't expand past the viewport's height -->
<div class="text-center" style="max-height: calc(100vh - 48px)">
Lorem ipsum....super long
</div>
</v-col>
<v-col class="primary rounded" cols="5">Editor</v-col>
<v-col class="success rounded" cols="5">Stage Stuff</v-col>
</v-row>
</v-container>
</template>
Basically, you just limit the max height of the div when its content gets longer. The 100vh is the full height of the viewport. The 48px is the cumulative vertical padding of <v-container /> and the <v-col />.
See live demo.
Note:
The 48px comes from the cumulative vertical paddings/margins/borders of the whole page. In our case, it is the 12px top and bottom padding of the <v-container/> plus 12px top and bottom padding of the <v-col/>. This is a known trick when we want to achieve a full pager div. You can read more here: https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j
I have HTML I want to give border-bottom property to the <Label> element which is a child of <StackLayout>.
My problem is the border-bottom is taking full width like a div in the web. I want this Label element to be inline like a span so that it's width should not be more than its content width.
<StackLayout *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
</StackLayout>
Below is the layout I'm getting now. But I don't want that orange line to be end to end. Instead its width should always be equal to the text present inside that Label.
Instead of StackLayout, you can have FlexboxLayout with the justifyContent="center".
<FlexboxLayout justifyContent="center" *ngIf="!places.length">
<Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-
5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All
Activities"> .
</Label>
</FlexboxLayout>
Try setting horizontalAlignment on Label to center
<Label horizontalAlignment="center" ...
Add horizontalAlignment="center" to the label. This will center the component, making it only the size it needs to have.
Example playground: https://play.nativescript.org/?template=play-vue&id=8kZUFY
My goal is to use ag-grid in an Angular 5 project and have the grid take up all of the available vertical space in a flexbox layout. The grid seems happy to use "height:100%" when it's contained in a div which has a defined pixel height or when the div has a percentage height but isn't in a flexbox layout. But it always seems to have no height when I try to host it in a flex item.
How can I get my grid to expand to take up the height of its flex item container? Here's a plunker with an example of what I'm seeing and trying: https://embed.plnkr.co/D8YgM6/.
Here's how I am creating my layout:
<div style="height:100%;display:flex;flex-direction:column;">
<div style="height:250px;flex-grow:0;">
<h5>Container div with specified height in pixels, ag-grid with percentage height</h5>
<ag-grid-angular style="width: 100%; height: 80%" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
<div style="flex-grow:1;">
<h5 class="red">Container div using flex height, ag-grid with percentage height</h5>
<p>How can I get the grid to be aware of my div's actual height?</p>
<ag-grid-angular style="width: 100%; height: 80%;" class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData"
>
</ag-grid-angular>
</div>
</div>
I want the grid in the second flex item to have an appropriate height. How can I do this?
In your plunker, set the flex-basis of the item containing your grid to 0, this achieves I think what you are after. I've just been wrestling with the same:
.item-1 {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}
Plunker Screenshot running in Chrome
I'm not sure why this works, maybe someone with more in depth knowledge of ag-grid can comment?
try setting auto height on grid ready event
this.gridApi.setDomLayout('autoHeight');
details: https://www.ag-grid.com/javascript-grid-width-and-height/
I drew a line chart using flot in the studentchart div using:
$.plot(jQuery("#studentavgchart"), DATA, options);
Graph will draw outside the div with class oneTwo. If I can remove the style of the div studentchart it shows javascript error.
I need to draw the graph inside the parent div ie; in oneTwo
<div class="oneTwo">
<div class="widget" >
<div class="header">
<span>
<span class="ico gray info2"></span>Total Class No
</span>
</div>
<div class="content">
<div id="studentchart" style="width:100%;height:300px;"></div>
</div>
</div>
</div>
I see your plot function call is using "studentavgchart" and your div has the id of "studentchart"
I ran into this issue as well and found that my Plot div needed a style or a class that specified the height. Either in pixels or %.
Hope that helps.