Filed Under

Being a huge fan of Layout Builder and Drupal comes with its challenges. I'm solving one of those pesky issues today, which has been a thorn in my side for months. A nod to Bert Vivie on the Drupal Slack Channel for cracking it. Literally, it's two lines of CSS.

I'm working on a project for LibertyHall.org. In Layout Builder, if the source code is clicked off, you get the full body field. But sometimes editing the source is essential. Clicking Source reduces it to one line, which is tough to manage. Literally, two lines of CSS fix this. I'm using Asset Injector for now until finalizing the actual CSS for this site.

 .ck-content { color: #000!important; }

The description contains this simple solution. One line adjusts text to black in the editor for readability.

.ck-source-editing-area textarea { height: 100%!important; }

This adjusts the CKEditor's text area height to 100%. Now, clicking Source shows a full-height source code window ready for additions.

The beauty of open-source communities like Drupal is the sharing spirit. On Drupal Slack, the CKEditor 5 Channel reveals a comment highlighting and fixing the issue. Hopefully, this is helpful.