<zg-column-resize>
The <zg-column-resize> tag is a web component that serves as a handle for resizing a column and used as a CSS target for styling by the developer. The <zg-column-resize> web component should not be accessed specifically beyond styling.
Related Web Components
Usage
The <zg-column-resize> element is a generated element added to <zg-head-cell> when the column-resizable attribute is defined.
<zing-grid column-resizable src="https://cdn.zinggrid.com/datasets/user-roles.json"> </zing-grid>
Attributes
There are no attributes available for the <zg-column-resize> web component.
CSS Variables
<zg-column-resize> can be styled with CSS variables, like so:
:root { --zg-column-resize-background: red; }
Below is a list of all the associated <zg-column-resize> CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-column-resize-background | none | Sets the background of the resize handle | ||
| --zg-column-resize-height | 40% | Sets the height of the resize handle | ||
| --zg-column-resize-top | 30% | Sets the top position of the resize handle | ||
| --zg-column-resize-width | 4px | Sets the width of the resize handle |
CSS Selector
<zg-column-resize> can be styled by common CSS selectors, like so:
zg-column-resize { background: red; }
Slots
There are no slots available for the <zg-column-resize> web component.
[api: <zg-column-resize>]