User Manual

08.14.2024

MANUAL

FAQ: Applying the same style to multiple items

## Answer Use the "[Field CSS](/en/manual/table-management-extended-field-css)" and "[Control CSS](/en/manual/table-management-extended-control-css)" functions. --- ## Overview When applying the same style to multiple items, you can apply CSS to the selector of each item individually. However, by using the "[Field CSS](/en/manual/table-management-extended-field-css)" and "[Control CSS](/en/manual/table-management-extended-control-css)" functions, you can set the same content with one class selector. ## Operation The following is the setting method for changing the background color of the Category A, Number A, and Date A items to yellow on the editing screen. 1. Open the target table. 1. Click Manage → Table Management. 1. Select the Editor Tab. 1. Select the Category A item from the current settings and click the Advanced Settings button. 1. Enter any name in "[Field CSS](/en/manual/table-management-extended-field-css)" and "[Control CSS](/en/manual/table-management-extended-control-css)". *In this example, enter "color-yellow". 1. Repeat steps 4 and 5 for the Number A and Date A items. 1. Open the "[Style](/en/manual/table-management-style)" tab. 1. Click the New button to display the dialog. 1. Enter any title, such as "Make the background color of Category A, Number A, and Date A items yellow" in the title. 1. Enter the following style in the style field. ##### CSS ``` .color-yellow input{ background-color:yellow; } ``` 11. Uncheck "All" for the output destination and check only "Edit". 12. Click the Change button in the dialog. 13. Click the Update button at the bottom of the screen. 14. Check the edit screen of the target table and confirm that the background of the items Classification A, Number A, and Date A is yellow. *5 If you want to set multiple classes, enter them separated by a space. (Example) "color-yellow textcolor-red" ## Related Information <div id="ManualList"><ul><li><a href="/en/manual/table-management-extended-field-css">Table Management: Editor: Item Detail Settings: Field CSS</a><span>08.13.2024 up</span></li> <li><a href="/en/manual/table-management-extended-control-css">Table Management: Editor: Item Detail Settings: Control CSS</a><span>08.13.2024 up</span></li></ul></article> <ul><li><a href="/en/manual/table-management-style">Table Management: Style</a><span>08.13.2024 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
TOP
このページをシェアする
記載された商品名、各製品名は各社の登録商標または商標です。 © Implem Inc.