Add inline style to symfony2 twig form - css

{{ form_widget(titleForm.titleBasic, {'attr' : {'style' : { 'color:red', 'border:none' } }} ) }}
Sometime I had use inline css but I forggoted how to write twig sintax for inline css.

This is working for me. With ; instead of ,
{{ form_widget(titleForm.titleBasic, {'attr' : {'style' : 'color:red; border:none' } }} ) }}

Even though this is an old but still correct answer, I stumbled on it. A better and cleaner way to do this is to put your styling in the FormType:
->add('foo', TextType::class, [
'attr' => [
'style' => 'color:red, border:none',
'placeholder' => 'Foo'
]
])
In that way if you use the form in other templates you wouldn't have to write extra inline css while rendering it.

Related

Symfony 4 - Organize layout of fields

Using Symfony 4, I wonder if there a simple way to organize the layout of how display my fields.
For now, I template everything in my views (to have 2 columns for example) :
<div class="row">
<div class="col-md-6">
{{ form_row(form.name) }}
</div>
<div class="col-md-6">
{{ form_row(form.company) }}
</div>
</div>
{{ form_rest(form) }}
But, I don't want to do this, I just want to render whole form in my view, and manage the template in my FormBuilder. I would like to write something like :
$builder
->add('<div class="row"><div class="col-md-6">', HtmlType::class)
->add('name', TextType::class, [
'label' => 'Nom'
])
->add('</div><div class="col-md-6">', HtmlType::class)
->add('company', TextType::class, [
'label' => 'Société cliente'
])
->add('</div></div>', HtmlType::class);
I looked at the documentation, but it's pretty poor, it shows how to inerhit from existing fields.
Is there a way to create this HtmlType to just handle simple Html tags ? or a better way ?
You should be able to do something like that :
$builder->add('your_field', YourFieldClass::class, [
'attr' => ['class' => 'your css class'],
]);
The best solution would be to create a custom form theme. Reference to the documentation is here. I haven't done this myself for creating custom grid but I guess you can create some custom type options using the OptionResolver that will tell your template how to organize your fields and then based on that you can organize your custom form theme however you want.

Symfony - pass custom data from Form Builder to form theme

I would like to set a special div surrounding a bunch of my fields. For that I want to add something to the form builder that I could detect in my form_theme, and set the div when it's there.
I tried to add
->add('field', new myCustomType(), array('inherit_data' => true, "label" => false, "required" => false, 'attr' => array("test" => "aaa")))
to the form builder, setting an custom attr, it's actually rendered in the html as an attribute... But I'm unable to detect it in the form theme.
{{ block('widget_container_attributes') }}
Only gives the widget attributes, and
{{ block('row_container_attributes') }}
doesn't work. I actually have a hard time finding any source online about what variables are available in the blocks of the form theme and how to use them (it was already difficult to know how to call blocks).
I looked for some more information on the official site, here mostly but without any success...
Thanks ahead for any help !
If you put it in your form builder, then you might as well permanently set in your template. If there is some logic required to set the data, then that belongs in your controller anyway, so just put it there to start with.
Controller:
public function someAction()
{
// ....
return $this->render('some_twig_template.twig.html', array(
'attr' => array("test" => "aaa")
);
}
Then in your twig template
{{ dump(attr) }}
{{ dump(attr.test) }}
EDIT:
To render in your template every time, you can set a class on the rendered field directly:
{{ form_label(form.field, 'My label', { 'label_attr': {'class': 'js-hidden-row'} }) }}
{{ form_widget(form.field, { 'attr': {'class': 'js-hidden-row'} }) }}
Then in my javascript you can hide with some simple jQuery:
<script>
jQuery(document).ready(function() {
$('.js-hidden-row').hide();
});
</script>

How to set attr id and class in form widget

How can I set attr id and class in twig, something like :
{{ form_widget(form.description,{'attr':{'id':"editor-one",'class':"editor-wrapper"}}) }}
If I understand your question correctly, wou want to add a class to a form. You can do so by passing the class as an attribute option to createFormBuilder.
$this->createFormBuilder($entity, array('attr' => array('class' => 'classname')));
I imagine you can do the same with ID, although I have not tried that myself.
You must move 'id' outside of 'attr', like this:
{{ form_widget(form.description,{'id':"editor-one", 'attr':{'class':"editor-wrapper"}}) }}

Add class to content field (link) in drupal

I want to add a class to the <a>-Tag of a Field that consists of a URL-link and a link text (it's a field of type "Link") and the name of the field is content.field_c_button_link
So with twig in my HTML-File I want to have something like this:
{{ content.field_c_button_link.0.addClass('button blue') }}
How can I add a class properly?
Why not piece the anchor tag together manually? That way you have complete control over everything. Something like this in your template
{{content.field_url.0['#title']}}
Ok, this is horrible but it's the only way I found to get this to work:
If you look at the default drupal build array for your link you should see that content.field_c_button_link.0 is an array(4)
'#type' => string(4) "link"
'#title' => string(15) "Big Blue Button"
'#options' => array(0)
'#url' => object Drupal\Core\Url(11)
So, to set classes directly on the <a> tag we have to load '#options' (which is presently empty) with the right setup of subarrays
'#options' => array(1)
'attributes' => array(1)
'class' => array(2)
string(6) "button"
string(4) "blue"
The only way I could find to do this within twig was to use a series of temps and merging them with the original array because twig wouldn't parse anything else I tried:
{% set temp = {'attributes': {'class': ['button','blue']}} %}
{% set temp2 = content.field_c_button_link.0 %}
{% set temp2 = temp2|merge({'#options': temp}) %}
{% set temp3 = content.field_c_button_link|without('0') %}
{% set temp3 = temp3|merge({'0': temp2}) %}
{% set content = content|merge({'field_c_button_link': temp3}) %}
Note the |without which is a Drupal/twig filter. I had to use it to remove the empty '0' element to avoid having the link print twice.
Please tell me there is an easier way.

Set widget container attributes dynamically

I'm busy with templating my forms inside Symfony 2.0.
It is possible to add attributes to a formfield like this:
$form->add('name', 'text', array('attr' => array('class' => 'my_class')));
But how can I dynamically add attributes to the formfield widget? If i look to the form_div_layout.html.twig content, their is a
{{ block('widget_container_attributes') }}
which can load attributes, but I have no idea where I can add attributes to my FormBuilder in the Controller. Could anyone help me?
Thx!
You should do that in twig layer:
{{ form_row(form.name, {attr: {class: 'my_class'}}) }}

Resources