Why do field labels in Event Registration forms not display correctly

Question

I am using Civievent in version 4.6.10 with Wordpress 4.3.1. Have set up a training event and using a registration form. When I display the form in Test mode it works fine, but when in Live mode the field labels do not display - I just get the * for the required fields and the box to enter the data. Even stranger, when I look at the HTML code that is generated, it looks identical for this section - the label text is in the code for every field! If I try and submit the form without entering any data, I get the error messages as expected for the compulsory fields, but the field labels are then displayed, just for the compulsory fields! Any ideas anyone?

I have used both a preset profile and a customised profile to generate the form, with the same result.

Answer 1

This is specifically a problem with Bootstrap. In its infinite wisdom, it has laid claim to the class "label" to display an element like it's a tag or label. Unfortunately, you just have to add the following CSS, which overrides everything that Bootstrap adds:

.crm-container .label {
  display: inherit;
  padding: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  white-space: inherit;
  vertical-align: inherit;
  border-radius: inherit;
}

Big picture, this is a deep-seated problem with Bootstrap: the class names it uses are way too broad and common. Other UI frameworks play much more nicely and prefix their magical classes with something that'll avoid this kind of namespace clash.

Answer 2

The problem was in the 'label' element in the CSS - the theme I am using set the label to white color, because within the main theme it is used for labels on buttons, normally white on a colored button. I edited the Civcrm CSS file to override the color. Just means I have to remember to re-edit it whenever there is a CiviCRM update!

Answer 3

You can change this with the help of civicrm element class or you can made changes in civicrm css because if you apply css based html element then it will apply to all the element.

Answer 4

That sounds like a css problem. Can you do "inspect element" where you would expect the label and find out if the label text is made invisible, or transparent or the same color as the background?

A good place to change CSS problems with your template like this with is to add an extra css file to your filesystem and then add it to "Custom css URL" in Administer - System Settings - Resource URL's.

This way upgrades of your theme and an upgrade of your CiviCRM will not impact these CSS overrides.