# 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}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ec9help.weaver.com.co/1-ec9-workflow-engine-form-api/9-common-css-style-case-sharing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.