Support > Repository > Input control > Style specification of input field

You can specify the style in the input field and the area surrounding it.

To apply the style to the input field, you can specify "only the input field", "the area enclosing the input field", "both".

Figure 1 Applying styles to input fields

At the actual input timing in "input field", the background becomes white.When the cursor moves, it changes to the specified background color.

Figure 2 White background on input
Figure 3 Background color is set again when input is completed

Specify "model item detail definition> input control> style".In Figure 2, it is set common to all screens, but you can specify them separately for each screen.

Write CSS directly in the input field.You can specify where you want to apply with the choices provided on the right side.When it is blank, it becomes "input field only".

background-color: beige
Figure 2 Apply styles
As shown in Figure 2, CSS can also specify the color name directly.

To specify the width of the list box on the registration/update screen, specify width.Units can have pixels (px) and height (em) for one character.


The application place is left blank.(When blank, it is treated as "input field only".))

For a concrete example, please read "Input control> input field length> list box case".

Date type (calendar input)

This setting can also be applied to date type (calendar input). Please refer to "Input control> input field length> date type (using calendar)" for a concrete sample.

You can specify styles for div elements that store radio buttons and check boxes.In FIG. 3, the height is set to 150 px, and scroll bars are prepared.

Figure 3 Example of style specification for div element

Definition method

We enclose it in "input control> style" of the model item with div {..} as follows.

Figure 4 Specifying styles

Number of wrapping of check box/radio button

In the example shown in Fig. 3, the number of loopbacks of the check box/radio button is also specified.

Fig. 5 Checkbox/Radio button wrap number


In the example shown in Fig. 3, two items are displayed side by side in a layout.

Figure 6 Layout settings
Figure 7 Layout alignment

Combined use with other settings

After the div {...} setting, you can specify other styles, such as specifying colors.Styles not enclosed by div {...} are applied to the checkbox itself.

To be precise, the style is applied to the span element that encloses the checkbox.

The following example is an example where the text color is red.

div{height:150px;overflow-y:scroll;} color:red
Figure 8 Setting both div and span elements

Setting to detail screen

Please read "Output control (style)> CSS class name/style specification".

You can also apply an expression to the CSS entry field.You can use functions prepared by Wagby.

IF(${age}>30,"background-color: beige","")

Notes on using expressions are as follows.

  • Please enclose CSS part with double quotation mark.As in the example above, if the condition is not satisfied, return an empty string ("").
  • When applying to the input screen, it is a good idea to enable "Redraw screen when changing value" setting for triggering item.In the above example, apply to age item.When this changes the value of age item, the screen is redrawn and CSS is applied.

The repository key common to all screens is presentation/displayitem/@style_inputall.The area specification is presentation/displayitem/@style_inputall_2.

The repository key of the registration screen is presentation/displayitem/@style_insert.The area specification is presentation/displayitem/@style_insert_2.

The repository key of the update screen is presentation/displayitem/@style_update.The area specification is presentation/displayitem/@style_update_2.

The repository key of the copy registration screen is presentation/displayitem/@style_copy.The area specification is presentation/displayitem/@style_copy_2.

The repository key of the list update screen is presentation/displayitem/@style_updatelist.The area specification is presentation/displayitem/@style_updatelist_2.

The repository key of the simultaneous update screen with the parent model is presentation/displayitem/@style_updatelistInParent.The area specification is presentation/displayitem/@style_updatelistInParent_2.