FuelPHP Forums

prichard

Hello,
I try to use the fieldset class with the bootstrap twitter, bur I have some problem. how can I ?
- add class="control-label"
- add <p class="help-block">Supporting help text </p>
- and create a special template for button in app/config/form.php because de div class for fields and button are different Thanks
<form class="form-horizontal">
<fieldset>
<legend>Legend text </legend>
<div class="control-group">
<label class="control-label" for="input01">Text input </label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text </p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>

Peter

As far as I know, you can't add a class to a label with FuelPHP's Fieldset class. But what you can do is use jQuery to add that class or add or modify your CSS code that you don't need to add that class to a label but you select it like:
#myform label { .... } On the dots you put the markup code for bootstrap's .control-label.

prichard

Thanks Peter, but jquery is not a good solution if javascript is disable. So I searched in the field core/classes/fieldset/field.php,
and I found solutions. When you add a fied you can add 2 attributes:
'description' and 'template' but I found nothing for add attribute to label. But if you want, at the line 537 you can add directly the attribute to label.
It's not a good way but for the moment it' s the only solution I found. If somebody have another solution?

paolo.umali.dev

I currently have this: return array(
'prep_value' => true,
'auto_id' => true,
'auto_id_prefix' => 'form_',
'form_method' => 'post',
'form_template' => "{open}<table>{fields}</table>{close}",//form open and close
'fieldset_template' => "\n\t\t<tr><td colspan=\"2\">{open}<table>\n{fields}</table></td></tr>\n\t\t{close}\n",
'field_template' => '<div class="control-group {required} {error_class}">{label} <div class="controls">{field} <span class="help-inline">{description}</span> {error_msg}</div></div>',
'multi_field_template' => "\t\t<tr>\n\t\t\t<td class=\"{error_class}\">{group_label}{required}</td>\n\t\t\t<td class=\"{error_class}\">{fields}\n\t\t\t\t{field} {label}<br />\n{fields}<span>{description}</span>\t\t\t{error_msg}\n\t\t\t</td>\n\t\t</tr>\n",
'error_template' => '<span>{error_msg}</span>',
'required_mark' => 'required',
'inline_errors' => false,
'error_class' => 'validation_error', ); I don't like to use jquery just to add a class to label. I need it to use bootstrap .form-horizontal Since I don't want to edit any core, I just added the class .form-horizontal-fuel along with .form-horizontal Then applied /*fuel forms fixes*/
.form-horizontal-fuel label {
float: left;
width: 160px;
padding-top: 5px;
text-align: right;
}

Harro

On a fieldset field, you can define the label as an array(), which will allow you to set attributes on the label. Looking at the code of Fieldset_Field and Form_Instance, that should work. So

// instead of using
'label' => 'field name here'

// use
array('label' => 'field name here', 'class' => 'form-horizontal')

paolo.umali.dev

Thanks Harro, but I'm not sure if I get what you meant. Although I'm not sure yet if I need use Orm's Observers for best practice, here's my current register code. I have Simpleauth and Orm in use. public function action_register()
{
$this->template->title = 'User Registration'; Auth::check()
and Session::set_flash('alert', array(e('You\'re already logged in thereby not allowed to register again'), 'notice'))
and Response::redirect('/'); //form generation
$fieldset = Fieldset::forge('user_register')->add_model('Model_User');
$form = $fieldset->form()->set_attribute('class', 'form-horizontal form-horizontal-fuel');
$form->add('submit', '', array('type' => 'submit', 'value' => 'Register', 'class' => 'btn btn-small btn-primary'));
if ($fieldset->validation()->run())
{
$fields = $fieldset->validated(); if (\Auth::create_user($fields, $fields, $fields, $group = 1, array('first_name'=>'Paolo')))
{
Session::set_flash('alert', array(e('Hurray! Your account is now ready for prime time. Please login'), 'success'));
Response::redirect((Input::referrer() == Uri::base(false).'user/login') ? '/' : Input::referrer());
} }
else
{
if ($fieldset->show_errors()) Session::set_flash('alert', array($fieldset->show_errors(), 'error'));
} $this->template->set('content', $form->build(), false); //false will tell fuel not to convert the html tags to safe string.
}
I'm trying to do things in one shot, and also saving myself from creating another view file as I already have a base template. (I have yet to learn Themes, but that will be next). So In here, I was able to set the class for the <form> tag as it's possible using set_attribute method. For the input fields, they are easy too as they can be defined in the Model properties. I had issue with labels as in the form config file, it is using {label}, so I don't get yet how I can add my own class for the label. Bootstrap wants you to add 'control-label' for all labels when using 'form-horizontal'. I ended up adding another class to the <form> tag 'form-horizontal-fuel' so that I can just add the css properties of .form-horizontal .control-label to .form-horizontal-fuel label.

Harro

You're using add_model() to populate the fieldset, so the label is defined in your model's $_properties. Normally, it's something like:

protected static $_properties = array(
  'date'    => array(
   'type'   => 'date',
   'validation' => array(
    'required'
   ),
   'form'    => array(
    'label'  => 'Invoice date',
    'class'  => 'small datepicker',
    'readonly',
   ),
  ),
 );

but you can change that to

protected static $_properties = array(
  'date'    => array(
   'type'   => 'date',
   'validation' => array(
    'required'
   ),
   'form'    => array(
    'label'  => array('label' => 'Invoice date', 'class' => 'form-horizontal'),
    'class'  => 'small datepicker',
    'readonly',
   ),
  ),
 );

paolo.umali.dev

I am not yet in the level that I can fix it myself, but I would just like to report that somethings here ain't working for me So initially:

Btw, for some reason, I'm not able to do code formatting here when replying. I'm using Chrome Version 22.0.1229.79 m
Update: Manually inserting bbcode works though.

 protected static $_properties = array(
  'id',

  'username' => array( //column name
   'data_type'  => 'varchar',
   'label' => 'Username',
   
   'form' => array(
       'description' => ' Your username', //inline text
   ),   
   'validation' => array('required', 'max_length'=>array(50), 'unique'=>array('users.username')) //validation rules
    ),

Notice that there is already a label key for the username array. This accepts text only and when defined, will be used by the form rendered by Fieldset::build() for the label text. On your suggestion,
// instead of using 'label' => 'field name here' // use array('label' => 'field name here', 'class' => 'form-horizontal')
I did not get it as it's weird doing

  'username' => array( //column name
   'data_type'  => 'varchar',
   //'label'=>'Username',
   array('label'=>'Username', 'class'=>'control-label'),
   'form' => array(
       'description' => ' Your username', //inline text
   ),   
   'validation' => array('required', 'max_length'=>array(50), 'unique'=>array('users.username')) //validation rules
    ),

It didn't work for me. I then tried

  'username' => array( //column name
   'data_type'  => 'varchar',
   //'label'=>'Username',
   
   'form' => array(
       'description' => ' Your username', //inline text
'label' =>array('label'=>'Username', 'class'=>'control-label'),
   ),   
   'validation' => array('required', 'max_length'=>array(50), 'unique'=>array('users.username')) //validation rules
    ),

Still not working. To add, it's weird that the form array here with key description is actually used for the field's description. I think it's better to use 'input' as the key or just simply 'field' since this form array with key 'type' => false will not render the field, isn't it awkward to call it such? At face value, it seems something for a form tag but it's simply for a field(input tag.)

paolo.umali.dev

Looking at Form Instance class,

 public function label($label, $id = null, array $attributes = array())
 {
  if (is_array($label))
  {
   $attributes = $label;
   $label = $attributes['label'];
   isset($attributes['id']) and $id = $attributes['id'];
  }

  if (empty($attributes['for']) and $this->get_config('auto_id', false) == true)
  {
   $attributes['for'] = $this->get_config('auto_id_prefix', 'form_').$id;
  }

  unset($attributes['label']);
  unset($attributes['id']);

  return html_tag('label', $attributes, \Lang::get($label) ?: $label);
 }

I think this is how it should be

  'username' => array( //column name
   'data_type'  => 'varchar',
   
   'label' => array('label'=>'Username', 'class'=>'control-label'), //label for the input field
   'form' => array(
       //'description' => ' Your username', //inline text
   ),   
   'validation' => array('required', 'max_length'=>array(50), 'unique'=>array('users.username')) //validation rules
    ),

But I always get

ErrorException [ Notice ]: Undefined index: label
COREPATH/classes/form/instance.php @ line 593

Why is there:

  unset($attributes['label']);
  unset($attributes['id']);

Harro

Because they are not valid attributes for the HTML label tag. And in your example the 'label' should be inside the 'form' array, it's part of the form definition, not of the property definition.

MaxZn

prichard wrote on Tuesday 22nd of May 2012:

Hello,
I try to use the fieldset class with the bootstrap twitter, bur I have some problem. how can I ?
- add class="control-label"
- add <p class="help-block">Supporting help text </p>
- and create a special template for button in app/config/form.php because de div class for fields and button are different Thanks
<form class="form-horizontal">
<fieldset>
<legend>Legend text </legend>
<div class="control-group">
<label class="control-label" for="input01">Text input </label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text </p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>

\fuel\core\config\form.php - Here you can set your template

MaxZn

subscribe to the issue. Trying to make it through the add ($ name, $ label ='', array $ attributes = array (), array $ rules = array ()), but then only the "word" how to add attributes to <label>?

Harro

You can't set attributes on label. From the fieldset point of view, the field label is an attribute of the field, not the HTML tag with the same name.

MaxZn

Thank you. I solved this by css.

cargi

I fixed the problem by creating a new file in /app/config/ called form.php and inserting the following: return array(
'prep_value' => true,
'auto_id' => true,
'auto_id_prefix' => 'form_',
'form_method' => 'post',
'form_template' => "\n\t\t{open}\n\t\t\n{fields}\n\t\t\n\t\t{close}\n",
'fieldset_template' => "\n\t\t{open}\n{fields}\n\t\t{close}\n",
'field_template' => "\t\t<div class=\"control-group\">\n\t\t\t<div class=\"control-label\">{label}{required}</div>\n\t\t\t<div class=\"controls\">{field} {description} {error_msg}</div></div>\n\t\t\n",
'multi_field_template' => "\t\t<div class=\"control-group\">\n\t\t\t<div class=\"control-label\">{group_label}{required}</div>\n\t\t\t<div class=\"{error_class}\">{fields}\n\t\t\t\t{field} {label}<br />\n<div class=\"controls\">{fields}</div>{description}\t\t\t{error_msg}\n\t\t\t\n\t\t\n",
'error_template' => '<span>{error_msg}</span>',
'required_mark' => '',
'inline_errors' => false,
'error_class' => 'validation_error',
); It's by no means perfect but should be a good start.

FuelPHP Forums

Ask your question about FuelPHP in the appropriate forum, or help others by answering their questions.

Howdy, Stranger!

Categories

In this Discussion