I have a Metronic 8.1.2 template (Angular) and I wish to use the IgniteUI (am on trial, but evaluating buying it).
The problem I've is that if I set the width to 100% it won't cover the full width available...
Here's the code:
<igx-grid [data]="Items" height="400px" primaryKey="id" [allowFiltering]="true" [rowEditable]="true"
(rowAdd)="addRow($event)">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
<igx-column field="id" [hidden]="true" dataType="string"></igx-column>
<igx-column field="tipo" header="Tipo" dataType="string"></igx-column>
<igx-column field="descrizione" header="Descrizione" dataType="string"></igx-column>
<igx-column [width]="'100px'">
<ng-template igxCell let-cell="cell">
<button igxButton="icon" (click)="editItem(cell.row.data)">
<igx-icon>edit</igx-icon>
</button>
<button igxButton="icon" (click)="deleteItem(cell.row.data)">
<igx-icon>delete</igx-icon>
</button>
</ng-template>
</igx-column>
</igx-grid>
and here's the result
Also if I remove the height, the grid goes forever down
When the width of the igxGrid is set to percentages it will size itself based on the parent element's width. If the parent element does not have width specified the igxGrid will size relative to the browser window.
I would recommend reading the Grid Sizing topic in order to familiarize yourself wiht the possible configurations.
Related
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
I am having some issues using the vuetify layout grid.
I have 3 v-flex elements in a v-layout inside my component.
One is a toolbar(top), one is for content(middle) and the other an action-bar(bottom)
I need the content(middle) v-flex to not push the bottom one off screen when the content inside of it expands to whatever height, it needs to stay the size that it would if there was no content inside of it. ie 10 of 12 rows. All 3 should remain in place.
Layout from app.vue is
<v-content app :dir="appDirection">
<v-container fluid fill-height>
<v-layout column >
<v-flex xs12>
<router-view/>
</v-flex>
</v-layout>
</v-container>
</v-content>
In router view I have a page with
<v-layout>
<v-navigation-drawer></v-navigation-drawer>
<my-component></my-component>
</v-layout>
in my component I have:
<v-layout column>
<v-flex xs1 sm1 md1 lg1> //TOOLBAR(top)
<v-toolbar></v-toolbar>
</v-flex>
<v-flex xs10 sm10 md10 lg10 > //CONTENT(middle)
<ul>
<v-infinite-scroll> should inherit dimensions and scroll
</v-infinite-scroll>
</ul>
</v-flex>
<v-flex xs1 sm1 md1 lg1>//ACTIONBAR(bottom)
<v-text-field></v-text-field>
</v-flex>
</v-layout>
If anyone knows how to achieve this your help would be greatly appreciated.
You need to first understand how v-flex inside v-layout works with prop column works.
When Column prop is set. v-flex takes the available height(not the screen-height/content-height) and divide it to 12 point grid system.
All you need to do is put height of the container (here v-layout). That will solve your problem.
I hope it helps.
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'm trying to create a Tab Panel that auto adjusts to fit the width of each of the tab content boxes, & also has a Max-Width of 900px, & also stays auto centered on the screen. I can get them to work individually, but not all 3 together.
You can see at this webpage that I've got the Max-Width: 900px working & the Auto-Centering working, but not Fluid-Width Auto-Adjust (it always stays at 900px instead of reducing its width for the slimmer tab content boxes, see the tabs "WATCH THE FILM" & "SCREENINGS" specifically): http://www.shellshockeddoc.com/
Here is my CSS for the tab content group so far:
#TabbedPanels2 .TabbedPanelsContentGroup {
max-width:900px;
margin-left:auto;
margin-right:auto;
margin-top:105px;
}
& here is the HTML:
<div id="TabbedPanels2">
<h2 align="center">TAB HEADLINE 1</h2>
<p align="center">Tab Content 1. This tab contains content about 850px wide.</p>
<h2 align="center" >TAB HEADLINE 2</h2>
<p align="center">Tab Content 2. This tab contains content about 350px wide.</p>
etc
</div>
Thanks a lot in advance! I'm pretty new to CSS & appreciate all the help I can get.
I searched all around stackoverflow but I couldn't find an answer for it. Here is the problem:
I have two divs, one on top of the other. I want to have the top div to adapt the height depending on the height of the below div.
<div id="parent" style="height:300px">
<div id="div1" style="height:auto"></div>
<div id="div2" style="height:45px"></div>
</div>
This because I intend to show/hide the bottom div and the top div must resize to fill the parent div.
I forgot to mention that the first div (the one that needs to adapt) has long content with overflow:scroll
Can you help me please?
Thanks
For this you can display:table property. Write like this:
#parent{
display:table;
height:300px;
width:100%;
}
#parent > div{
display:table-row;
}
#div1{
background:red;
}
#div2{
background:green;
height:45px;
}
Check this http://jsfiddle.net/7NuFr/