Help

Re: Better Whitespace Use with Custom CSS

3245 0
cancel
Showing results for 
Search instead for 
Did you mean: 

The sheer amount of whitespace in Airtable has always bugged me a little, so I’ve been making little edits to the stylesheet here and there to get more data on-screen. Below you’ll find some screenshots of what I’ve done and the code required to make it look that ugly.

You can use something like the Stylus extension/plug-in to apply the CSS to Airtable.

Note: I’ve come up with this code mostly through trial and error, so use at your own risk. (Let me know if something breaks spectacularly and I’ll try to help, but there’s a possibility I won’t be able to figure out what’s going on on your end.) Also, the actual structure of the HTML is changing all the time, so don’t be surprised if the code stops working suddenly.

EDIT: fixed code line-wrapping

image.png

In this first example, I’ve removed the row number and expand record button from the grid view – I’ve always found them superfluous.

(There’s also a header hack that reduces the vertical space quite a lot and smushes everything together which I didn’t include.)

/*****
* Row Header Cleanup
*  Removes the row number, expand record button, and associated whitespace
*****/
.dataRow .rowNumber {
    display: none !important;
}
.dataRow .expandButtonLeft {
    display: none !important;
}
.dataRow .staticCellContainer {
    width: 0px !important;
}
.dataRow .cell.primary {
    margin-left: 0px !important;
    width: calc(100%) !important;
}

/* The below code fixes the column width in groups*/
.gridViewGroup.groupLevel3 ~ .dataRow .cell.primary {
    margin-left: 0px !important;
    width: calc(100% - 47px) !important;
}
.gridViewGroup.groupLevel2 ~ .dataRow .cell.primary {
    margin-left: 0px !important;
    width: calc(100% - 31px) !important;
}
.gridViewGroup.groupLevel1 ~ .dataRow .cell.primary {
    margin-left: 0px !important;
    width: calc(100% - 15px) !important;
}

/*****
* Column Label Icon Removal
*  Removes the label icon and resizes the label to take up the full space
*****/
.nameAndDescription svg {
    display: none !important;
}
.nameAndDescription .name {
    left: 8px !important;
    width: calc(100% - 19px) !important;
}

image.png

This next one allows the expanded record view to expand to 80% of wider windows and allows multiple columns in the field display.

/*****
* Expanded Records – Whitespace
*  Removes field label icons, darkens the label text,
*  and removes much of the whitespace
*****/
.labelCellPair svg.displayTypeIcon {
    display: none !important;
}
.labelCellPair .fieldLabel {
    color: rgb(3, 3, 3) !important;
}
.labelCellPair {
    margin-bottom: 1em !important;
}

/*****
* Expanded Records – Expand, Multi-Column
*  On wider windows (above 1410px), sets the expanded record view
*  to use 80% of the screen for multiple columns
*****/
@media(min-width:1410px) {
    .detailViewWithActivityFeedBase .dialog {
        width: 80% !important;
    }
    .detailViewWithActivityFeedBaseLeft {
        width: calc(100% - 308px) !important;
    }
    .detailViewWithActivityFeedBaseLeft .body {
        columns: 10 calc(450px + 26px);
        padding: 0px!important;
        column-gap: 12px !important;
        column-rule: 1px dotted #ddd;
    }
    .detailViewWithActivityFeedBaseLeft .hiddenColumnsHeader {
        margin-top: 1em;
        margin-bottom: 1em;
        column-span: all !important;
    }
    .labelCellPair {
        width: calc(100%) !important;
        margin: 0px !important;
        padding: .5em 1em 1em 1em !important;
        -webkit-column-break-inside: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

image.png

Finally, this code lets calendar entries expand on hover.

/*****
* Calendar Formatting
*  Resize calendar entries to fit article titles on hover 
*****/

.calendarRecord:hover {
    height: auto;
    margin-bottom: 1px;
}
.calendarRecord:hover .recordHoverTarget {
    height: 100%;
    min-height: 25px;
    opacity: 1;
    z-index: 100;
}
.calendarRecord:hover .recordHoverTarget > .flex {
    height: auto!important;
    min-height: 24px;
}
.calendarRecord:hover .recordHoverTarget .truncate {
    white-space: normal;
    margin-bottom: 2px;
}
13 Replies 13

Generally speaking, no, you wouldn’t be able to touch the styles of an embedded base without a plug-in. The restriction is by design – for security, modern browsers prevent code on a parent page from affecting embedded content originating from another site.

There are ways around this, but they’re generally quite involved and require you to essentially read the data or HTML from Airtable into another page, manipulate it there, and then serve it. It’s a bit outside my knowledge, but you should start a thread for
it and see if anyone knows more.

Jen
4 - Data Explorer
4 - Data Explorer

Hi Andy, thanks for your detailed response, I appreciate it! I hear you on the “by design” and security. But, seems Airtable could build this feature in someday, to work directly from Airtable, which would flow to the embedded base. Maybe they will. :slightly_smiling_face: Airtable rocks for the most part.
Thanks again!

daniel_ly
4 - Data Explorer
4 - Data Explorer

Hi, @Andy_Lin1
Thank you for taking the time and creating and sharing the code with everyone. Im currently trying to import the expanded record view to stylus, but it is not working. Is it still working for everyone else?
Thank you

Hey there, they’ve changed the underlying HTML and CSS a few times, so I’m not sure when the original CSS code I posted broke. Here’s an updated version of the CSS:

/*****
* Expanded Records – Expand, Multi-Column
*  On wider windows (above 900px), sets the expanded record view
*  to use 95% of the screen for multiple columns
*****/

@media (min-width: 900px) {
    .DetailViewWithActivityFeedModal__dialog {
      width: 95% !important;
      max-width: unset !important;
    }
    .detailViewWithActivityFeedBaseLeft {
      width: calc(100% - 308px) !important;
    }
    .DetailViewWithActivityFeed__detail-view .body {
      columns: 476px auto;
      column-gap: 12px !important;
      column-rule: 1px dotted #ddd;
    }
    .detailViewWithActivityFeedBaseLeft .hiddenColumnsHeader {
      margin-top: 1em;
      margin-bottom: 1em;
    }
    .labelCellPair {
      width: 100% !important;
      margin: 0px !important;
      padding: 0.5em 1em 1em 1em !important;
      break-inside: avoid-column !important;
    }
    .detailViewWithActivityFeedBase .header .animate.quiet {
      display: none;
    }
}