EasyUI Forum

General Category => EasyUI for Vue => Topic started by: fengdie on August 23, 2018, 02:23:26 AM



Title: datagrid width overflow
Post by: fengdie on August 23, 2018, 02:23:26 AM
Then appLayout layout, which uses the datagrid component. The datagrid width will overflow. for details, see attached
再appLayout布局,里面使用datagrid组件。datagrid宽度会溢出。详情见附件.


Title: Re: datagrid width overflow
Post by: jarry on August 23, 2018, 05:29:26 AM
Please add 'overflow:hidden' style to the 'main-body'.

Code:
<div class="main-body f-full f-column" [b]style="overflow:hidden;"[/b]>
    <Tabs class="f-full">
      <TabPanel title="DataGrid" bodyCls="f-column">
        <DataGrid class="f-full" :data="data">
          <GridColumn field="itemid" title="Item ID"></GridColumn>
          <GridColumn field="name" title="Name"></GridColumn>
          <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
          <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
          <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
          <GridColumn field="status" title="Status" align="center"></GridColumn>
        </DataGrid>
      </TabPanel>
    </Tabs>
</div>