How do I stack CMS field labels in silverstripe? - silverstripe

Question

I am creating custom CMS fields in SilverStripe 4 and they are being built with the label in a left column and the editor in the right column.
See Image:
How do I stack the label and editor like the default content editor and label seen in the picture?

Answer 1

So I finally found the answer while searching for something else. I'll answer my own question in case someone is looking for the same thing in the future as finding answers for Silverstripe questions is hard.
In the doc's it says to do this for an additional WYSIWYG editor
return new FieldList([
new HTMLEditorField('OtherContent', 'Other content', $this->OtherContent, 'myConfig')
]);
We are going to break it up into components to give us more control
$fields = parent::getCMSFields();
//create a $fields variable that will hold the new fields
$jobDescriptionField = HTMLEditorField::create('JobDescription', 'JobDescription');
//create the actual field in it's own variable
$fields->addFieldToTab('Root.Main', $jobDescriptionField , 'Content');
//add the new field to our fields and tell it to appear above the default 'Content' editor
If we stop here and return $fields, we will get the Label floated to the left and content editor floated to the right. It will be squished even on a full screen. Not good.
So we need to add a class provided by silverstripe called "stacked"
$jobDescriptionField->addExtraClass('stacked');
So the full code looks like:
public function getCMSFields(){
$fields = parent::getCMSFields();
$jobDescriptionField = HTMLEditorField::create('JobDescription', 'JobDescription');
$fields->addFieldToTab('Root.Main', $jobDescriptionField , 'Content');
$jobDescriptionField->addExtraClass('stacked');
return $fields;
}