EasyUI Forum
March 28, 2024, 10:33:41 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Please add fit layout options to TabsCompoent  (Read 17071 times)
softboy99
Newbie
*
Posts: 43


View Profile Email
« 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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/
Logged
softboy99
Newbie
*
Posts: 43


View Profile Email
« Reply #2 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: January 23, 2018, 02:54:23 AM »

Please refer to the example below:
Code:
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<div style="display:flex;height:100%">
<div style="width:200px;background:#ddd;padding:10px">Menu</div>
<div style="display:flex;flex:1">
<eui-tabs style="flex:1">
<eui-tab-panel [title]="'Tab1'" [bodyStyle]="{display:'flex',padding:'10px'}">
<eui-panel style="flex:1">The nested panel.</eui-panel>
</eui-tab-panel>
<eui-tab-panel [title]="'Tab2'"></eui-tab-panel>
<eui-tab-panel [title]="'Tab3'"></eui-tab-panel>
</eui-tabs>
</div>
</div>
`,
styles: [`
html,body{
height:100%;
margin:0;
padding:0;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {

}
Logged
softboy99
Newbie
*
Posts: 43


View Profile Email
« Reply #4 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 on: January 23, 2018, 06:23:04 PM »

How do you place the datagrid component, please show some code snippets to demonstrate your issue.
Logged
softboy99
Newbie
*
Posts: 43


View Profile Email
« Reply #6 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>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #7 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%;">
...
</eui-layout-panel>

As a shortcut, you can use this code instead:
Code:
<eui-layout-panel region="center" bodyCls="f-column" style="height:100%;">
...
</eui-layout-panel>
Logged
softboy99
Newbie
*
Posts: 43


View Profile Email
« Reply #8 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=, 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>


Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #9 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=
Logged
softboy99
Newbie
*
Posts: 43


View Profile Email
« Reply #10 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%;">
...
</eui-layout-panel>

As a shortcut, you can use this code instead:
Code:
<eui-layout-panel region="center" bodyCls="f-column" style="height:100%;">
...
</eui-layout-panel>



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
« Last Edit: February 06, 2018, 06:07:29 PM by softboy99 » Logged
softboy99
Newbie
*
Posts: 43


View Profile Email
« Reply #11 on: March 26, 2018, 03:04:55 AM »

Hi,
the datagrid height cannot be 100%
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #12 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=
Logged
fengdie
Jr. Member
**
Posts: 87


View Profile Email
« Reply #13 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国内没地方交流。
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!