3

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.

|improve this question
6

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.

|improve this answer
  • Thanks for the background info, Andrew - I have now edited the CSS properly with the code as you have suggested. Is it possible to change the CSS file in the core build with this change so that it is available for all users? – Richard Adams Dec 3 '15 at 10:03
  • This is actually an issue with your theme, not CiviCRM. This CSS I suggested here is simply to undo everything that your theme is applying willy-nilly to things with the class "label". Since most people's themes don't use Bootstrap, they don't experience the issue in the first place. – Andrew Hunt Dec 4 '15 at 19:40
  • Andrew, thank you for posting this. Your code helped solve my problem which was that the field label text was white against a white background. – HPCiviCRM Sep 5 '16 at 4:09
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!

|improve this answer
0

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.

|improve this answer
0

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.

|improve this answer
  • Thanks for the very quick response! I have used the inspector and confirmed it is the CSS - found that the color for the label element is set to #ffffff, i.e. white on a white background. Trouble is this is inherited from the Theme <div> settings so I am uncertain how to find/change this, as all the 'user-editable' settings appear to be OK. Still working on it!! – Richard Adams Nov 25 '15 at 21:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.