I know this isn’t a true Coda How To, but I figured I’d post it here anyway in case it helps someone.
The Expanded Row modal packs some powerful layout features, like multiple columns and full tables. But sometimes there just isn’t enough room to fit all of your content, leaving those columns and tables feeling cramped. I’ve wished for those modals to have a true edge-to-edge fullscreen option (feature suggestion!). So today I used this CSS hack to do it myself.
Before
After
It’s not perfect. Single-column Text fields are atrociously wide. And removing the visual of being in a modal removes that sense of context, which can be valuable when you want to deep dive, but it can also make you feel a bit disoriented. But this seems like a decent workaround for when you really need that extra horizontal real-estate.
Fortunately, the browser extensions you’ll need to pull this off (see below) usually allow you to quickly toggle this hack on or off, so you’re not stuck with this fullscreen view; you can use it as needed.
Here’s the CSS code I used:
/* Fullscreen Expanded Rows */
.vhtTD_MO {
max-width: unset;
border-radius: unset;
position: unset;
}
.G4xPgXzs {
align-items: unset;
}
To do this yourself, you’ll need to add a browser extension like Stylish or Stylebot. Follow instructions on how to add custom CSS to a website. Then paste the code above for all coda.io webpages.
I hope this helps!