VisualWikitext
 
 
(3 intermediate revisions by the same user 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 2: Line 2:
 
|Subject version=2.1
 
|Subject version=2.1
 
|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 10:18, 17 February 2023

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://www.open-csp.org/index.php?title=DevOps:Doc/FlexForm/2.1/instance/adjust_styling&oldid=2333"