VisualWikitext
m (Charlot moved page Adjust styling to Adjust styling)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Below is an image explaining where the CSS classes are used.


[[File:FlexFormInstanceStyling.png|frameless|980x980px]]
An instance ( like in the image above, an instance is one row ) is rendered using the following HTML:
* BEGIN Div element with Main wrapper class
** BEGIN Div element with Wrapper list class
*** BEGIN Instance wrapper ( wrapper-main-extra )
**** Move Handle as a span element ( button-move-extra )
**** Delete button as a span element ( button-remove-extra )
**** Add instance button as a span element ( button-add-extra)
**** The HTML that is used in the form inside the instance tag. ( In the image above it's the two input fields )
*** END Instance wrapper ( wrapper-main-extra )
** END Div element with Wrapper list class
** Button to add new row at the bottom or create the first row if the instances are empty ( button-on-button-class )
* END Div element with Main wrapper class
We give the wrapper main a display of Flex. Then we use flex to order the element inside an instance.
ws-base-props
Line 1: Line 1:
{{Base properties
{{Base properties
|Title=instance/examples
|Title=Adjust styling
|Class=Doc
|Class=Doc
}}
}}
ws-class-props
Line 1: Line 1:
{{Doc properties
{{Csp class properties
|Subject version=2.1
|Subject version=2.1,2.5
|Doc subject=DevOps:Doc/FlexForm
|Doc subject=DevOps:Doc/FlexForm
|Doc synopsis=How to change the looks of instances
|Doc parent=DevOps:Doc/FlexForm/2.1/instance
|Doc sort order=10
|Doc target group=Administrator
}}
}}

Latest revision as of 09:02, 26 August 2025

Below is an image explaining where the CSS classes are used.

FlexFormInstanceStyling.png

An instance ( like in the image above, an instance is one row ) is rendered using the following HTML:

  • BEGIN Div element with Main wrapper class
    • BEGIN Div element with Wrapper list class
      • BEGIN Instance wrapper ( wrapper-main-extra )
        • Move Handle as a span element ( button-move-extra )
        • Delete button as a span element ( button-remove-extra )
        • Add instance button as a span element ( button-add-extra)
        • The HTML that is used in the form inside the instance tag. ( In the image above it's the two input fields )
      • END Instance wrapper ( wrapper-main-extra )
    • END Div element with Wrapper list class
    • Button to add new row at the bottom or create the first row if the instances are empty ( button-on-button-class )
  • END Div element with Main wrapper class


We give the wrapper main a display of Flex. Then we use flex to order the element inside an instance.

Retrieved from "https://open-csp.org/index.php?title=DevOps:Doc/FlexForm/2.1/instance/adjust_styling&oldid=3753"