Symfony2 - custom css for select in forms - css

i have a little problem with the rendering of my forms.
I would like my different select box have different size.
<div >
{{ form_label(form.date_of_birth, 'date de naissance') }}
{{ form_widget(form.date_of_birth )}}
</div>
<div >
{{ form_label(form.Alimentation, 'Alimentation') }}
{{ form_widget(form.Alimentation)}}
</div>
This two widgets renders select box. I want the two to have a different size, one large, one thin.. But, i can't directly set the style of the , and set the width of the div does nothing.
I also tried this:
->add('date_of_birth', 'date', array('required' => false, 'attr' => array('style' => 'width:330px' ),
'widget' => 'choice',
'format' => 'dd-MM-yyyy',
'years' => range(1970,2012)))
This does nothing.

Explained in Twig Template Form Function Reference http://symfony.com/doc/current/reference/forms/twig_reference.html
{{ form_widget(form.name, { 'attr' : { 'class' : 'yourClass' } }) }}
Now you have added a class attribute to your form field with yourClass as css class. So you can style your field using css.

Related

Getting the string of the chosen option in a drop down that comes from an entity repository

I am trying to pull in a repository into a form in Symfony 3.4 and then use the chosen option when the form is submitted.
Here's the form code:
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('text', TextareaType::class, [
'label' => 'Text'
])
->add('category', EntityType::class, [
'class' => Category::class,
'choice_label' => 'name',
'query_builder' => function(CategoryRepository $repo) {
return $repo->createQueryBuilder('c')
->groupBy('c.name');
}
])
->add('subcategory', EntityType::class, [
'class' => Category::class,
'choice_label' => 'subcategory',
'query_builder' => function(CategoryRepository $repo) {
return $repo->createQueryBuilder('c')
->groupBy('c.subcategory');
}
]);
}
With this I can render the form and it looks good. I can choose the various options in the CategoryRepository.
{% block body %}
{{ form_start(form) }}
{{ form_label(form.name) }}
{{ form_errors(form.name) }}
{{ form_widget(form.name) }}
{{ form_label(form.subcategory) }}
{{ form_errors(form.subcategory) }}
{{ form_widget(form.subcategory) }}
{{ form_end(form) }}
On submit, when checking with Xdebug, the category is the object Category. I can see the correct values present (those chosen in the drop down of the form) but I want just the string, e.g. category.name. How do I do that?
Also, it might need a different question, but when I select one of the categories, I'd like the subcategory to be updated to exclude those that don't belong to that chosen category. I realise this may require jquery.
I'm certain there are better ways, but one solution would be to
$category = $data->getCategory();
$data->setCategory($category->getName());
$data->setSubcategory($category->getSubcategory());
And to exclude the subcategories I use jQuery / JavaScript to retrieve the filtered results from a controller / repository, then remove or add those options in the HTML.

Symfony 3 SonataAdmin show a "Sonata_type_collection" field a readonly in Form edit

I have a "Sonata_type_collection" field that only the owner can edit , and i want that the admin can only read this attribute ( he can edit other attributes).
I couldn't find anything but this :
$formMapper->add('commandeElements', 'sonata_type_collection', array('required'=> true,'by_reference' => false,'attr' => array(
'readonly' => true,
'disabled' => true
)), array(
'edit' => 'inline',
'inline' => 'table',
'sortable' => 'position',
));
it works somehow , the attribute can't be edited(when the form is submitted an error message is shown) but the button "add" and the checkbox "delete" still and a dropdown can be edited at least in the view .
is there a way to do this ?
you can hide the buttons using btn_add = false in the options array
https://sonata-project.org/bundles/admin/3-x/doc/reference/form_types.html#sonata-type-collection
but I will probably try to check in the frontend with twig, check if the user has certain role {% if is_granted('ROLE_ADMIN') %} ... {% endif %} and enable or disable the form component.
I will probably do...
{% set disabled = !is_granted('ROLE_YOU_WANT_TO_ALLOW') %} // in your case ROLE_OWNER
and then when rendering try something like...
{{ form_row(yourForm.yourCollectionName, {
'disabled': disabled
}) }}
Take as an example the twig template reference
http://symfony.com/doc/current/reference/forms/twig_reference.html#form-variables-reference
That's an idea that may let you do what you want

display an image inside a text field in laravel 5.3

Is it possible to place an image inside Form::text() in Laravel? I have tried this:
{{ Form::text('Photo', asset('images/img.jpg'), array('class' => 'form-control', 'required' => '')) }}
but I get this on my view:
http://localhost/HBS/public/images/img.jpg

Custom Symfony ChoiceList way of rendering choices (grouped in divs)

I have a choice form field that has a lot of options that I need to group somehow so that they will be rendered divided in groups, maybe placed inside different divs.
I'm currently trying to implement the ChoiceListInterface to achieve that, but I don't know how to implement the methods so I can render the choices divided by groups, but the docs does not clarify how to do that..
The choices always get rendered together.
You have this array
$grouped_choices = array(
'Swedish Cars' => array(
'volvo' => 'Volvo',
'saab' => 'Saab',
),
'German Cars' => array(
'mercedes' => 'Mercedes',
'audi' => 'Audi'
)
);
First way: quick and simple
$builder->add($name, 'choice', array(
'choices' => $grouped_choices),
)
But I don't thinks it works with 'expanded' => true
So there is another way, more customizable (maybe more dirty)
In your FormType
foreach($grouped_choices as $name => $choices) {
$builder->add($name, 'choice', array(
'choices' => $choices),
'expanded' => true, //custom the widgets like you wants
);
}
Let the controller send the array to the view, then in the view
{% for name, choices in grouped_choices %}
<div class="whatever">
{{ form_row(name) }}
</div>
{% endfor %}

Where can I change the form text box size?

I make form in Controller like this below.
$form = $this->createFormBuilder($row)
->add('comment',null,array('label' => 'input comment'))
then in the twig file...
{{form_widget(form.commentToMutor)}}
It shows text input box,but it is too small.
How to change size of TextBox
Extending #manseuk 's answer (I don't have enough reputation to post a comment), you can also specify the html style attribute inside the form builder, if you preffer:
$form = $this->createFormBuilder($row)
->add('comment', null, array(
'label' => 'input comment',
'attr' => array('style' => 'width: 200px')
)
);
Edited from html attribute for width to html style attribute.
You could add a class to the form field :
$form = $this->createFormBuilder($row)
->add('comment',null,array(
'label' => 'input comment',
'attr' => array('class' => 'myclass')
)
);
and then create the CSS relevant to that class :
.myclass {
width: 200px;
}
Docs for the attr attribute here
Or in the twig file:
{# Define CSS class and call #}
{{ form_widget(form.commentToMutor, { 'attr': {'class': 'myclass'} }) }}
{# ... or enter width directly #}
{{ form_widget(form.commentToMutor, { 'attr': {'style': 'width: 200px'} }) }}
More here
Setting the width directly did not work for me. I had to set it through the style. Of course this is an easy fix, the correct way is to use a css class like others have suggested.
$form = $this->createFormBuilder($row)
->add('comment', null, array(
'label' => 'input comment',
'attr' => array('style' => 'width:200px')
)
);

Resources