By OliverH on

I have a fieldset with 5 elements in a row like so:

$form['fset'] = array('#type' => 'fieldset', '#attributes' => array('class' => array('container-inline'), 'style' => array('foo: bar;')));
$form['fset']['element'] = array(...);
$form['fset']['element'] = array(...);

When viewed in the browser, it looks like this:

<fieldset id="edit-fset" class="container-inline form-wrapper" style="foo: bar;">
  <div class="fieldset-wrapper">
    <div class="form-item etc.

I'm basically using the Bartik theme with some adjustments.

So now I have the fieldset styled like I want it and displayed without a title. The fieldset-wrapper class however contains a margin-top: 25px to clear the title, this means I now have a 25px gap above the fieldset I would like to get rid off. I can't just edit the global style.css, because other fieldsets still require the 25px gap to clear the title, so where or how do I override the margin-top in the fieldset-wrapper class?

⋅ Categories: Drupal 7.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

All fieldsets have an ID, also, you have the code right in front of you... the attributes array, you can add a unique class to target just this fieldset, but like I said, Drupal is already adding a unique ID for that purpose.

$form['fset'] = array(
  '#type' => 'fieldset', 
  '#attributes' => array(
    'class' => array('container-inline'), 
    'style' => array('foo: bar;')
));

As for adding those inline styles, well, less said about that the better, inline styles are the devils spawn.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
OliverH’s picture

OliverH commented

Right, I do specify margin-top in the attributes array, and it gets correctly applied to the fieldset with the class "container-inline". But then inside that fieldset a new div is opened with the class "fieldset-wrapper" and that has its own margin-top of 25px as specified on line 1132-1133 of style.css.

It's that margin-top that I want to adjust, but only for this specific fieldset.

OliverH’s picture

OliverH commented

I've copied the container-inline class from system.base.css to my own style.css as myown-container-inline, and added the margin-top directive there to the fieldset-wrapper subclass. Now I can call the myown-container-inline class, and It looks like how I want it to look, without messing up the general fieldset-wrapper class

alienzed’s picture

alienzed commented

This is a problem in Drupal 7 and Drupal 8. Bootstrap's grid system doesn't work with nesting like this. The fieldset-wrapper class is extraneous and prevents me from gracefully lining elements up in a grid.

I've resorted to the following dirty solution:

[code]

$form['interests']['startRow'] = array(

'#markup' => '<div class="row">',

);

/*** FORM ELEMENTS GO HERE***/

$form['interests']['endRow'] = array(

'#markup' => '</div>',

);

[/code]

n8thanael1900’s picture

n8thanael1900 commented

I was also having problems with .row class not working as expected in webforms - this was my solution:

https://api.drupal.org/api/drupal/includes%21form.inc/function/theme_fieldset/7.x