Adding classes to all form widgets in symfony

Question

I am trying to find a better way to assign classes to form elements in symfony. Currently, I can't seem to get away from assigning each one manually. ie:

$this->widgetSchema['title']->setAttribute("class","fieldInput");
$this->widgetSchema['tag_line']->setAttribute("class","fieldInput");
$this->widgetSchema['description']->setAttribute("class","fieldInput");
// etc

Things I tried without success

1) looping through $this->widgetSchema, treating it as an array and setting attributes to each key

2) $this->widgetSchema->setAttribute() but this only applied the class to the label that was generated, not the form element

There must be a way to hit all the fields without specifically directing them?

Can anyone point me in the right direction?

Why don't you use CSS for this? What good is a class if it is applied to EVERY form element? — Amy B
– Amy B, Commented May 27, 2010 at 15:47
I am not a huge fan of styling the actual element (input/textarea/etc), or even ID's. Less ability to reuse styles. Also, specificity can cause headaches as projects get bigger. I feel an <input> should be the same if it is on form, vs a separate one - and the class that is attached to it should dictate its style. One style for an input form might work today, but who knows when I need something different a month down the road. This way I avoid my css sheet turning into spaghetti. Nicole Sullivan does a better job of presenting the case than I - bit.ly/9iu6pX — Ryan
– Ryan, Commented May 27, 2010 at 16:04
I think you are understanding the entire concept of CSS wrongly. Also, that slideshow is BS. — Amy B
– Amy B, Commented May 27, 2010 at 16:22

nacmartin · Accepted Answer · 2010-05-27 16:34:00Z

9

There is a way:

Create a sfWidgetFormSchemaFormatter in lib/widget, which contains for instance, this (code from symfonians):

class sfWidgetFormSchemaFormatterDiv extends sfWidgetFormSchemaFormatter
{
  protected
    $rowFormat       = "<div class=\"form-row%is_error%\">\n  %label%\n  %error%\n   %hel<div class='myfieldclass'%field%</div>\n p%\n%hidden_fields%</div>\n",
    $errorRowFormat  = "%errors%\n",
    $helpFormat      = '<div class="form-help">%help%</div>',
    $decoratorFormat = "\n  %content%";

  public function formatRow($label, $field, $errors = array(), $help = '', $hiddenFields = null)
  {
    return strtr(parent::formatRow($label, $field, $errors, $help, $hiddenFields), array(
      '%is_error%'    => (count($errors) > 0) ? ' field_error' : '',
      //'%is_required%' => $field,
    ));
  }
}

Then, in your form, do:

$oDecorator = new sfWidgetFormSchemaFormatterDiv($this->getWidgetSchema());
$this->getWidgetSchema()->addFormFormatter('div', $oDecorator);
$this->getWidgetSchema()->setFormFormatterName('div');

Then you can style elements with the selector .myfieldclass input or whatever you want, this is a great way to change the structure/look of your forms.

answered May 27, 2010 at 16:34

nacmartin

2,18218 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

This is nice, but overkill. CSS suffices, generates less code, and is more maintanable.

afilina Over a year ago

You're giving a nice alternative, but the actual question remains unanswered. How do you inject a class into each widget? I'm using a CSS framework and so the alternative is not an option.

Sebastián Rojas · Accepted Answer · 2015-04-13 19:26:19Z

7

From within the form class:

foreach ($this->getWidgetSchema()->getFields() as $field)
{
  $field->setAttribute('class', 'custom-class');
}

You could also call that code from the constructor of a custom sfWidgetFormSchemaFormatter class if you have many form classes that need it:

public function __construct(sfWidgetFormSchema $widgetSchema)
{
    parent::__construct($widgetSchema);

    foreach ($this->getWidgetSchema()->getFields() as $field)
    {
        $field->setAttribute('class', 'custom-class');
    }
}

edited Apr 13, 2015 at 19:26

Sebastián Rojas

2,9201 gold badge30 silver badges36 bronze badges

answered Nov 7, 2011 at 14:02

hgossler

711 silver badge2 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:24:16Z

I am having the same issue.

Situation We have come to think that the separation between CSS and symfony's widget generation is a big learning curve for the integrators and we think there must be a way to leave the integrators more independent from the developers.

Client always want to have custom styled forms... and yet, custom handmade !DRY code is done. What I mean is that, Graphic designers do not design forms with only input text and label, they find all creative ways and our reality is to make it work in the framework to look the same as they design.

That's why we thought of using a sfWidgetFormSchemaFormatter, but form controllers are all different, and we wanted to be able to inject styling FROM the views... because it's an integration matter, not application matter. per se.

Solution path My team-lead and I came up to a solution. Mostly using partials and looping through them. A form view could look like what follows.

Our solution is not perfect because we'd like to say by the call in the view which controller could get which class names. But it's better than to use CSS's input[type=text] because our client still uses < IE8. But at least,

So we thought of Why not mapping field id's with a className that could have a different behavior (different from label+input (and of course +helper+error if needs be)).

What we do is that we inject control style for those special controllers (e.g.: label+select+select+select+helper+error) let's say this Widget has id some_field_id and we need it to the parent <li>.

We could do it like this:

$node_classes_map => array('some_field_id'=>'date-selector')

So... now's time for some code:

First, we need to use the 'list' widgetFormatter:

<?php
// lib/form/SomeForm.php
class SomeForm extends BaseSomeForm
{
   public function configure()
   {
       $this->widgetSchema->setFormFormatterName('list');
   }
}

Or, you could use qais answer to have ALL forms as lists (at last!! I didn't knew before now).

The view:

<?php
// apps/appName/modules/moduleName/templates/someviewSuccess.php
$node_classes_map = array(
  'some_field_id'=>'date-selector'
   // .date-selector would have many select side by side. 
   // (no CSS for that in this example)
);
include_partial('global/patterns/formParent',
    array(
        'form'=>$form,
        'form_classes'=>'labels-on-left',
        'node_classes_map' => $node_classes_map
    )
);

formParent looks like:

<?php
// apps/appName/templates/_patterns/formParent.php
$form_classes_attr = (isset($form_classes))?' class="'.$form_classes.'"':'';
$form_list_node_partial = 'global/patterns/listFormDefaultNode';
$model_name_lowercase = strtolower($form->getModelName());
$node_classes_map = (isset($node_classes_map))?$node_classes_map:array();
?>
<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form); ?>
<form action="<?php 
    echo url_for($model_name_lowercase.'/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : ''))
?>"<?php echo $form_classes_attr;
?> method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" '?>>
<h2><?php echo __(($form->getObject()->isNew()?'new.':'edit.').$model_name_lowercase.'.form.title'); ?></h2>
<fieldset>
    <ol>
<?php
    foreach($form as $item){
        $node_classes = (isset($node_classes_map[$item->renderId()]))?$node_classes_map[$item->renderId()]:'';
        include_partial($form_list_node_partial,
            array(
                'item'=>$item,
                'node_classes' => $node_classes
            )
        );
    }
?>
    <ol>
</fieldset>
<?php echo $form->renderHiddenFields() ?>
<?php echo $form->renderGlobalErrors() ?>
<?php echo (!$form->getObject()->isNew())? '<input type="hidden" name="sf_method" value="put" />':''; ?>
</form>

Each form element gets rendered by either a custom one or listFormDefaultNode.

From there, you could come up with a different partial to render a controller differently from a mainstream label+input+helper+errors to something more complex like label+select+select+select+helper+erros.

This is my default form *Node

<?php
// apps/appName/templates/_patterns/listFormDefaultNode.php
/**
 * Manual: http://www.symfony-project.org/forms/1_4/en/A-Widgets
 */
if(!$item->isHidden()){ ?>
<li class="<?php echo $item->renderId().((is_string($node_classes))?' '.$node_classes:''); ?>">
  <?php echo $item->renderLabel(); ?>
  <?php echo $item; ?>
  <?php echo (!!$item->renderHelp())?'<span class="helpers">'.$item->renderHelp().'</span>':''; // I did not find any hasHelper(), so switching to bool ?>
  <?php echo ($item->hasError())?'<span class="alertify error">'.$item->renderError().'</span>':''; ?>
</li>
<? }

Lastly, here is a start from my CSS:

Please note, here is a part of a project CSS and this uses part of concepts i'm developping with Snippies. Go there to get more ideas how I am structuring my CSS.

/* ****** Misc ****** */
/**
 * General form views settings
 **/
form ol, form ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
form input.text, form select {
  display: block;
  border: 0;
  padding: 4px;
  line-height: 12px;
  font-size: 15px;
}
form select {
  background-color: #e3e8eb;
  color: #506775;
  margin: 0;
}
form label {
  color: #345569;
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
form input.text {
  color: #345569;
  border: none;
  background-color: #e3e8eb;
  color: #738996;
  border: 0px solid #c3c987;
  padding: 4px;
  line-height: 12px;
  width: 100%;
}
form fieldset {
  padding: 0;
  margin: 0;
  border: none;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #98a7af;
  padding: 10px 0;
}
form li {
  margin-bottom: 10px;
}
form li .helpers {
  color: #98a7af;
}
/**
 * /General form views settings
 **/


/**
 * General error messages 
 **/
.alertify {
  padding: 0.8em;
  margin-bottom: 1em;
  border: 2px solid #ddd;
}
.alertify strong, .alertify p {
  padding: 0 0 10px 0;
  display: block;
}
.alertify ul {
  margin: 0;
  padding: 0 0 0 15px;
}
.alertify ul li {
  padding: 0 0 5px 0;
}
.error, .alert {
  background: #fbe3e4;
  color: #8a1f11;
  border-color: #fbc2c4;
}
/**
 * /General error messages 
 **/
/* ****** /Misc ****** */


/* ****** Specialization ****** */
/**
 * Form labels on the left
 */
form.labels-on-left fieldset {
  padding: 0;
  margin: 0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
form.labels-on-left li {
  clear: both;
  overflow: hidden;
}
form.labels-on-left li input.text, form.labels-on-left li select {
  border: 0;
  padding: 4px;
  line-height: 12px;
}
form.labels-on-left li input.text {
  width: 815px !important;
  float: left;
  padding: 6px;
  color: #506775;
}
form.labels-on-left li select {
  background-color: #e3e8eb;
  color: #506775;
  height: 26px;
  width: 400px;
  margin: 0;
  float: left;
}
form.labels-on-left li .beside {
  float: left;
}
form.labels-on-left li .beside a {
  font-weight: bold;
  padding: 5px 20px;
  font-size: 14px;
  display: block;
}
form.labels-on-left li label {
  color: #345569;
  width: 80px;
  font-size: 120%;
  text-align: right;
  font-weight: bold;
  float: left;
  display: block;
  padding: 5px 10px 0 0;
}
form.labels-on-left li .error span, form.labels-on-left li .helpers span {
  padding: 5px;
  display: block;
}
form.labels-on-left li .helpers {
  width: 100%;
}
/**
 * /Form labels on the left
 */
/* ****** /Specialization ****** */

As a side-note, I do not use symfony1 at all. Twig is so much better.<rant/>

Pedro Tentugal · Accepted Answer · 2014-02-27 23:30:55Z

0

This is old but for anyone trying to find this just go into the xxxxxFormFilter.php inside /lib/filter/doctrine/ and do this:

$this->getWidget('inputname')->setAttribute('class_name','class_name/id_name');

This way you can individually specify and control everything.

answered Feb 27, 2014 at 23:30

Pedro Tentugal

941 silver badge9 bronze badges

Comments

afilina · Accepted Answer · 2014-08-10 13:56:38Z

0

Depending on what base form you extend, you can add the following in the configure method:

public function configure()
{
    foreach ($this->widgetSchema->getFields() as $field) {
        $field->setAttribute('class','my-custom-class');
    }
    parent::configure();
}

I did mine in BaseFormDoctrine. You can use the same approach to add/override any attribute in the field or even add custom rules based on field type.

answered Aug 10, 2014 at 13:56

afilina

9551 gold badge11 silver badges25 bronze badges

Comments

Tom · Accepted Answer · 2010-05-28 11:32:51Z

-1

Apply the class to a parent element, not the individual elements:

TEMPLATE:

<form class="my-form" action="" method="">
 // put widgets here
</form>

CSS:

.my-form select {}
.my-form input[type=text] {}
.my-form textarea {}
.my-form input[type=submit] {}
etc...

edited May 28, 2010 at 11:32

answered May 28, 2010 at 11:26

Tom

30.8k27 gold badges94 silver badges126 bronze badges

1 Comment

Tom Over a year ago

I'm not sure the downvote is justified. This solution is acceptable in the majority of contexts these days. IE8 needs supporting in only specific cases.

Collectives™ on Stack Overflow

Adding classes to all form widgets in symfony

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related