MRT Records display - Complex CSS

Is there any documentation around for the different types of CSS that are used in the new forms? The CSS is quite complex and it can be very difficult to figure out where to add/remove bits of forms to make them display more efficiently.

In this case I have a large number of checkboxes that I would like to display for a MRT behaviour, if the are in a long line without headings then they are simply too hard to look at, however in the past I have used a table to display the checkboxes under their headings (or multiple groupings). See image:

Is there a simple way to make this happen with the new DB CSS that already exists? I'm not even sure where to insert the code if I create it on my own. ;)

No, this cannot be done with the existing CSS, you will need to add the table manually.

Use Split view mode, and select the Form Element that would like to add the checkboxes after, in the Tag Selector, select the Line Group Div.

copy that div, and paste a new one after it to create a new line group to add the checkbox table to. you'll want to remove all the other code from the div, so it is just an empty div with the class set to lineGroup. See the attached screen shots

Very different structure than the CSS in my current form. Each line looks like this and uses an unordered list.

<li class="formItem">
            <div class="formGroup">
                  <div class="lineGroup"> 
                     <div class="fullColumnGroup">
                          <div class="errorGroup">
<div class="fieldPair">
                       <div class="fieldGroup">
                                        <span id="sanitizeCode_Spry">
                       <span>
  <input id="sanitizeCode" name="sanitizeCode" type="text" value="<?php echo((isset($_GET["invalid"])?ValidatedField("sanCode","sanitizeCode"):"")); ?>" class="formTextfield_Medium" onBlur="hideServerError('sanitizeCode_ServerError');">
<label for="sanitizeCode" class="sublabel" >sanitizeCode:<span class="requiredIndicator">&nbsp;*</span></label>
                                            <span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldRequiredMsg">Please enter a value.</span>
                                        </span>
                       </span>
<?php
if (ValidatedField('sanCode','sanCode'))  {
  if ((strpos((",".ValidatedField("sanCode","sanCode").","), "," . "2" . ",") !== false || "2" == ""))  {
    if (!(false))  {
?><span class="serverInvalidState" id="sanitizeCode_ServerError">Please enter a value.</span><?php //WAFV_Conditional sanCode.php holIns(2:)
    }
  }
}?>
                       </div>
                       </div>
                          </div>
                     </div>
                  </div> 
            </div>
            </li>

This code is 'thick' and complicated, sometimes I wonder why we don't still use tables for forms. ;) They worked and forms are tabular in nature.

Anyway, I have made many a CSS form and they didn't require anywhere near as much code as that....

a new line could be created by adding this then:


<li class="formItem">
<div class="formGroup">
<div class="lineGroup">
Check box table here
</div>
</div>
</li>

OK. It would be great if there was some documentation that let you know what all of the other css divs are for.

Can you even have a table within a <li> ?

In the HTML 4.0.1 strict DTD: Yes, an LI is a block level element, a table is also a block level element.

The basic rule of thumb is that inline element types cannot contain block level element types.

Only block level element types can contain either inline or block level elements.

I will forward your suggestion to the documentation team.