A Modern Form Update and Interior Border Hack with CSS Grid

I am a developer on the Roundup Issue Tracker. Roundup is a trouble ticketing system written in Python. It is very flexible. Developers, researchers, and support staff use Roundup to define and manage the lifecycle of issues.

My background is in system administration. So I have built a tracker template designed for tracking system administration issues. Recently I redesigned the look of one of the more complex forms.

This is the (short) story of the decisions I made and the techniques I used.

The starting point

I have limited design experience. When I set this up many years ago, it looked ok to me.

Looking at it today, the bold color swatches behind the fieldset legends and grooved borders make it seem cluttered and busy. It needs a more modern look.

Step 1 - fewer borders

First I removed the borders from the fieldsets. This brought up an issue. Tabbing through the form moves you down the columns (divs) and not across the rows. The borders and the gap between them helped re-enforce this.

I decided to add a vertical rule between the columns. I set border-inline-end to 2 pixels (2px) on the first column. When the first column was longer than the second this looked great. But, the fieldset panes in the first column are collapsible. When the first column was shorter than the second column, the line between the columns didn't reach the bottom of the second column.

The solution I came up with was to add a 2px border-inline-start on the second column. Then I moved the second column back by 2px (the width of the line) using margin-inline-start. These overlapped border lines always span the entire height of the longest column.

The layout uses the Gridiculous grid system rather than display: grid. This requires one last tweak. On narrower screens (e.g. a cell phone), the two side-by-side columns stack. Adding an @media query to remove the borders when on a narrow display completed the tweak.

How to make a vertical rule with css grid

I plan to use display: grid at some point for this layout. It would reduce the amount of CSS I need to serve and provide a more flexible layout. But, there is no mechanism for creating a rule in the gaps of a grid layout. I found a trick for doing that, but I haven't committed to using it yet. There is one nice advantage to using this trick. When the columns stack, grid removes the gap and also the (pseudo) vertical rule. No need for an @media cleanup.

To create the rule, I created a div (the base div) with the background-color set to the vertical rule's color. I set the CSS for that div to display: grid and the gap: 0 2px. I placed two divs inside the base div. They form the columns. Set their background-color to that of the rest of the page. Now the 2px column gap in the grid exposes the darker rule color of the base div. You can only emulate a solid border, but it works for my use case. Could linear gradients emulate a grooved, ridged, dotted, or dashed border?

My eyes, my eyes

The second change was to remove the banners of color behind the fieldset legends. With the more colorful themes, it's a bit bright on the eyes 8-). A simple underline matching the monochromatic theme replaces it. The HTML for the legend is <legend><span>Title Goes Here</span></legend>. Removing the background color from legend > span cleared the banner. Since the span is set to use display: block, adding a 2px border-block-end completed the work.

The final look

This is a significant improvement.

But it's still (a) bad form...

One question that you may ask is why tab order moves down the first/left column rather than across the form. As forms go this breaks a few rules:

1. use a single column for forms. In this case, I have not only two primary columns, but the basic fieldset has 2 subcolumns.
2. put labels above their control, or right-aligned labels to the left of the control (for ltr languages). Here, I use left-aligned labels to the left of the controls.

To justify my decisions, let's look at the use cases. As with most trackers, there are two types of users of this tracker. The:

1. people who need something done, and
2. the people doing the work.

There is also a third user, the person modifying the tracker for use at their site.

The left-hand column provides information for the people who need something done. Tabbing down the column moves the page like there was only one column. Ideally, these users would scan down the left column of the page. Using left-aligned labels provides this scan line.

Since Roundup can look at the user's role and remove/hide/collapse the second column we can get even closer to rule 1. This would make it a simpler form for these users. Still, displaying key status info above the fold requires packing a lot of fields in a small area. Following the "one column", "label on top" guidelines would increase scrolling.

There is one more tweak for this redesign. With the second column displayed, a skip link will be added at the bottom of the first column. The skip link will jump to the update textarea where the user can add a change note/update. This bypasses all the tab stops in the second column.

Adding a skip link at the top of the page to target the update textarea area is an idea. However, a skip link already exists at the top of the page. It jumps to the main section, bypassing the left-hand navigation column (not shown in the images). Would adding a second top-of-page skip link be confusing clutter? I'm not sure.

For people doing the work, references to the schedule and linked tickets are more useful. The second column provides access to them. The "All Fields" tab provides even more information hidden from view. For example:

1. summaries of related tickets
2. a graph of relationships among tickets
3. extra fields for scheduling automatic actions.

This brings us to the third user. I tried to set up a form that the Roundup admin could adapt for their workflows. The admin should not have to be an HTML/CSS expert. The idea of Roundup is that it is customizable for many use cases. I have tried to use clean semantic HTML and simple CSS to support that idea.

Thanks for reading this. I hope you enjoyed it and learned something. You can find more information on Roundup using the link below.