Fixing "ccm-required' spans in concrete5


The concrete5 CMS adds a span after labels when their field is required. The problem is that the labels are block, but the span is inline. So you get the required * on a new line after the label text. Here's how to fix that with a little bit of javascript and css.

It looks something like this:

 default_display.pngObviously, that's really not ideal at all. Keep reading to see how to fix it. Or just download the package now and have it work on your site automatically.


How to actually fix it

First off, you want to add some code to your package controller. You are doing everything in a package, right? ;)

The paths would be relative to your package's css and js folders. The reason that we're putting this in outside of the theme is so we fix it in the dashboard, login, and other system pages.

Next, we need to make the css and javascript files.

In order to prevent a jump on page load because of the span displaying, we first set the display of these spans to none. The javascript will move it in to the label, then add the 'ccm-required-active' class so that it displays again.

If you are concerned with supporting people without javascript, you will want to use modernizr or something similar to check that the browser has javascript enabled. You put a 'no-js' class on the html tag, then the library will remove it if javascript is active. By targeting from the 'no-js' class, we can still show required icon for those visitors.

This is pretty straightforward, at least, I think so. First it grabs all the 'ccm-required' spans on the page. Next it adds a nonbreaking space so that it's not directly against the text of the label. Then the first label before it has the span appended. After that, the 'ccm-required-active' class is added, so that it now shows up.

There is a brief moment on page load where the * is not shown, but it doesn't affect the page layout at all. 

After it's all running, you should have something that looks like this:


This is much better, and helps make your site look a lot more professional.

In the past, I've done a lot of tweaks just trying to get the css working, often making the labels display inline-block. That's not always the best fix, and doesn't always cover all cases. Some forms it actually breaks more than it fixes. I think doing it this way is much better.