> For the complete documentation index, see [llms.txt](https://ec9help.weaver.com.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ec9help.weaver.com.co/1-ec9-workflow-engine-form-api/9-common-css-style-case-sharing.md).

# 9 Common CSS style case sharing

> Base on customer requirement, the style could be changed flexible
>
> For the current template only --> write in the code block
>
> Only valid for all nodes of the current workflow --> written on the workflow basic settings - Custom page (CSS file)
>
> Take effect on all system workflows-> write in application settings-global custom page (CSS file)
>
> Note: if you write in a code block, you need to wrap a layer of style label, no need in CSS file

## 1 Detail add delete button to display on the left

> scenarios: detail add delete button, always right display, how to achieve left display Insert style to code block :

```css
<style>
.detailButtonDiv{float：left}
</style>
```

No label is required if edit in css file

```css
.detailButtonDiv{float：left}
```

## 2 Image in cell align center, adaptive scaling

> Scenario: inserts images in cell, always tiled from top left, how to center, how to scale adaptively
>
> Minimum Version Requirements: KB900190901 Add custom attributes class identification to the cell where the picture is located:

```css
imageCell
```

The cell width is larger than the picture size, aligen picture in centere, add below style:

```css
.imageCell_swap{background-position：center}
```

The width of the cell is smaller than the size of the picture, image adaptive zoom display with cell, adding style:

```css
.imageCell_swap{background-size：100%100%}
```

## 3 Control Browse button link color

> Scenario: Browse button link color is not controlled by cell color, how to modify browse button link color

**Option 1: KB900190901 or more required** Access the following link through the sysadmin account, to start configuration, after opening the browse button link color completely take the cell set color

> api/workflow/index/updateWfConfig?name=browser\_color\_controlByCell\&value=1 (value parameter 0 closes ,1 turns on, default closes)

**Option 2: No system version limitation**

> Add custom attributes class identification to the cell where the Browse button is located:

```css
browserColorCell
```

Added style

```css
.browserColorCell a{color：red! important}// force a link to the browse button to appear in red
```

## 4 Control the minimum width of the main table selection box field

> Scenario: main table selection box field, minimum width requirement 100 px, when the selected item is only "yes / no ", how to reduce the width again Add a custom attribute class identification to the cell where the selection box is located:

```css
selectCell
```

Added style

```css
.selectCell .wea-select{min-width：50px! important}
```