Title: Please add fit layout options to TabsCompoent Post by: softboy99 on January 21, 2018, 08:02:58 AM Please add fit layout options to TabsCompoent,so that we can set the size of tabs container to fit it's parent container.
Title: Re: Please add fit layout options to TabsCompoent Post by: stworthy on January 21, 2018, 06:29:19 PM The 'fit' property is not needed. The tabs component has 'display:flex' style, you just need to set 'flex:1' style on it to make it fill its parent container. For more flex layout information, please look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Title: Re: Please add fit layout options to TabsCompoent Post by: softboy99 on January 22, 2018, 08:16:17 AM Hi
I have tried set inline style:style="flex:1;border: 1px solid red;", but not worked. Title: Re: Please add fit layout options to TabsCompoent Post by: stworthy on January 23, 2018, 02:54:23 AM Please refer to the example below:
Code: import { Component, ViewEncapsulation } from '@angular/core'; Title: Re: Please add fit layout options to TabsCompoent Post by: softboy99 on January 23, 2018, 08:16:20 AM Hi,
I tried your suggestion, but failed and caused a new problem about datagrid columns. You can check the attached picture. Title: Re: Please add fit layout options to TabsCompoent Post by: stworthy on January 23, 2018, 06:23:04 PM How do you place the datagrid component, please show some code snippets to demonstrate your issue.
Title: Re: Please add fit layout options to TabsCompoent Post by: softboy99 on January 25, 2018, 07:41:29 AM <eui-layout #layout fit ="true" style="height: 100%">
<eui-layout-panel region="north" class="logo" title="后台管理" style="text-align:center;"> </eui-layout-panel> <eui-layout-panel region="west" title="导航" collapsible="true" euiResizable handles="e" style="width:150px;" (resizing)="layout.updatePaddings()"> <eui-tree [data]="menuData"></eui-tree> </eui-layout-panel> <eui-layout-panel region="center" style="display:flex;flex:1;height:100%;"> <eui-tabs style="display:flex;flex:1"> <eui-tab-panel [title]="'Tab1'"[bodyStyle]="{display:'flex' }" style="border: 1px solid red;padding: 0px"> <eui-panel style="flex:1;"> <eui-datagrid [pagination]="true" [lazy]="true" [data]="data" [total]="total" [pageNumber]="pageNumber" [pageSize]="pageSize" [pagePosition]="pagePosition" [loading]="loading" (pageChange)="onPageChange($event)"> <eui-grid-column field="inv" title="Inv No"></eui-grid-column> <eui-grid-column field="name" title="Name"></eui-grid-column> <eui-grid-column field="amount" title="Amount" align="right"></eui-grid-column> <eui-grid-column field="price" title="Price" align="right"></eui-grid-column> <eui-grid-column field="cost" title="Cost" align="right"></eui-grid-column> <eui-grid-column field="note" title="Note"></eui-grid-column> </eui-datagrid> </eui-panel> </eui-tab-panel> <eui-tab-panel [title]="'Tab2'"></eui-tab-panel> <eui-tab-panel [title]="'Tab3'"></eui-tab-panel> </eui-tabs> </eui-layout-panel> <eui-layout-panel region="south"> <eui-panel-header> <div class="panel-title" style="text-align:center">版权所有 2015-2017</div> </eui-panel-header> </eui-layout-panel>> </eui-layout> Title: Re: Please add fit layout options to TabsCompoent Post by: stworthy on January 25, 2018, 07:00:22 PM You should add 'display:flex' style to the layout panel.
Code: <eui-layout-panel region="center" [bodyStyle]="{display:'flex' }" style="height:100%;"> As a shortcut, you can use this code instead: Code: <eui-layout-panel region="center" bodyCls="f-column" style="height:100%;"> Title: Re: Please add fit layout options to TabsCompoent Post by: softboy99 on February 04, 2018, 11:36:19 PM Hi,
after use the sample code dynamic tab content https://www.jeasyui.com/demo-angular/main/index.php?plugin=Tabs&theme=material&dir=ltr&pitem=Dynamic%20Tab%20Content&sort= (https://www.jeasyui.com/demo-angular/main/index.php?plugin=Tabs&theme=material&dir=ltr&pitem=Dynamic%20Tab%20Content&sort=), the datagrid height cannot be 100% of the tab. the following is the code: tab component: <eui-datagrid [pagination]="true" [lazy]="true" [data]="data" [total]="total" [pageNumber]="pageNumber" [pageSize]="pageSize" [pagePosition]="pagePosition" [loading]="loading" (pageChange)="onPageChange($event)" bodyCls="f-column" style="height:100%;border: 1px solid red;padding: 0px"> <eui-grid-column field="inv" title="Inv No" width="100%"></eui-grid-column> <eui-grid-column field="name" title="Name" width="100%"></eui-grid-column> <eui-grid-column field="amount" title="Amount" width="100%" align="right"></eui-grid-column> <eui-grid-column field="price" title="Price" width="100%" align="right"></eui-grid-column> <eui-grid-column field="cost" title="Cost" width="100%" align="right"></eui-grid-column> <eui-grid-column field="note" title="Note" width="100%"></eui-grid-column> </eui-datagrid> appcomonent: <eui-layout #layout fit ="true" style="height: 100%"> <eui-layout-panel region="north" class="logo" title="后台管理" style="text-align:center;"> </eui-layout-panel> <eui-layout-panel region="west" title="导航" collapsible="true" euiResizable handles="e" style="width:150px;" (resizing)="layout.updatePaddings()"> <eui-tree [data]="menuData" (nodeClick) ="menuClick($event)"></eui-tree> </eui-layout-panel> <eui-layout-panel region="center" bodyCls="f-column" style="height:100%;"> <eui-tabs #tabsHost style="display:flex;flex:1"> <eui-tab-panel [title]="'Home'" iconCls="icon-ok"> <p>The home tab.</p> </eui-tab-panel> <eui-tab-panel *ngFor="let tab of tabs" [title]="tab.title" bodyCls="f-column" style="height:100%;border: 1px solid red;padding: 0px"> <tab-detail [component]="tab.component"></tab-detail> </eui-tab-panel> </eui-tabs> </eui-layout-panel> <eui-layout-panel region="south"> <eui-panel-header> <div class="panel-title" style="text-align:center">2015-2017</div> </eui-panel-header> </eui-layout-panel>> </eui-layout> Title: Re: Please add fit layout options to TabsCompoent Post by: stworthy on February 06, 2018, 12:13:39 AM Please refer to this example https://www.jeasyui.com/demo-angular/main/index.php?plugin=Layout&theme=material&dir=ltr&pitem=SplitPanel&sort=
Title: Re: Please add fit layout options to TabsCompoent Post by: softboy99 on February 06, 2018, 05:56:36 PM You should add 'display:flex' style to the layout panel. Code: <eui-layout-panel region="center" [bodyStyle]="{display:'flex' }" style="height:100%;"> As a shortcut, you can use this code instead: Code: <eui-layout-panel region="center" bodyCls="f-column" style="height:100%;"> After use your above suggestion, its ok now. But after combine the sample code of dynamic tab content https://www.jeasyui.com/demo-angular/main/index.php?plugin=Tabs&theme=material&dir=ltr&pitem=Dynamic%20Tab%20Content&sort=, the datagrid height cannot be 100% of the it parent container. use chrome to debug found there is a <app-user> element outside datagrid elment Title: Re: Please add fit layout options to TabsCompoent Post by: softboy99 on March 26, 2018, 03:04:55 AM Hi,
the datagrid height cannot be 100% Title: Re: Please add fit layout options to TabsCompoent Post by: stworthy on March 26, 2018, 06:07:57 PM The DataGridComponent uses the css flexible box layout. Please look at https://www.jeasyui.com/demo-angular/main/index.php?plugin=Layout&theme=material&dir=ltr&pitem=SplitPanel&sort=
Title: Re: Please add fit layout options to TabsCompoent Post by: fengdie on April 16, 2018, 07:39:28 PM Please add fit layout options to TabsCompoent,so that we can set the size of tabs container to fit it's parent container. 哥们,有QQ吗?加下交流下。 easyui for angular国内没地方交流。 |