CSS Styling of Form Left Column

[PtrNrs]

As convert from Fabrik 2.x to 3.x, I note that the styling has changed considerably.

In 2.x, each element including labels has its own ID, therefore allowing individual styling of elements.

In 3.x, that is no longer the case eg the following HTML for a Display element with Show Label = No:-

<li style="clear:both;width:100%;" class="fabrikElementContainer display">
  <div class="displayBox">
    <div class="leftCol">
      <label for="ak7fo_ace_course_selection___crsIntrotext" class="fabrikLabel ">
        Text in here . . .
      </label>
      <span class="fabrikErrorMessage"></span>
    </div>
    <div class="fabrikElement">
      <div class="fabrikSubElementContainer" id="ak7fo_ace_course_selection___crsIntrotext">
      </div>
    </div>
  </div>
</li>

Note that the text appears in the leftCol div (is this a bug?), so I need to individually style the left column for this element (I want to stretch the text across the full container).

In my custom_css.php, I know I can style the leftCol or the fabrikLabel div, but that changes all elements in the form. I also know that I can individually style #ak7fo_ace_course_selection___crsIntrotext but there's no text there anyway.

How, then, do I individually style the text for this element?

 

[PtrNrs]

Just a couple of notes:-

• My apologies if this is really a CSS question - does anyone know of a good reference on the addressing of HTML elements in CSS?
• The fabrikLabel class has a trailing space, I presume in anticipation of adding something else on the RHS. Does that create problems? Or it doesn't matter?

 

[jfquestiaux]

I think there are two ways to handle this:

• Either you create a custom template for this form and enclosed the desired element in a div with a custom class so you can apply a CSS to the fabrikLabel class inside that div
• Or (maybe easier), set this element alone in a group, so you can have a specific rule for the fabrikLabel class inside that group, something like "fieldset#groupX .fabrikLabel" (with X being the ID of the group).

 

[troester]

You get the CSS for individual labels with e.g.
.leftCol label[for=ak7fo_ace_course_selection___crsIntrotext] {your-style}

But I agree: an id in the surrounding div or li (as in F2.0) would be fine (especially as e.g. the checkbox element doesn't have a "label for", so you can't style the individual label at all.

 

[PtrNrs]

Thank you both, but troester wins the prize. I would never have guessed that! Can you recommend a good CSS reference for this sort of stuff?

And Rob & Hugh: Any chance we can have the IDs reinstated?

 

[rob]

nope sorry, as as soon as you create repeating groups you start to encounter all sorts of crazyness when more than one element in the page has the same id.

 

[PtrNrs]

Thanks, Rob, I'll work with it.