Symfony 3+ : Styling the parent div of a field (div containing label + input) - forms

At first, my objective here is to make two input fields inline, the picture is attached :
Symfony allow us to style form's field by using attr for form_widget of the field and label_attr for form_label but here i want to apply a style for the div containing the label + input that Symfony generate automatically in the twig :
$builder
->add('language', ChoiceType::class, array(
'choices' => array(
'FR' => 5,
'EN' => 1,
),
'label' => ' ',
'attr' => array('style' => 'float:left;width:40%'),
))
->add('level', ChoiceType::class, array(
'choices' => array(
'Good' => 5,
'Bad' => 1,
),
'label' => ' ',
'attr' => array('style' => 'float:left;width:40%'),
));
result : The style has been applyed to the input (select in our case) and the div parent wasn't be affected (stay with empty style):
<div id="homebundle_personnel_personnelLanguages_0">
<div> <!-- the div that i want to apply a style -->
<label for="homebundle_personnel_personnelLanguages_0_language" class="required"> </label>
<select id="homebundle_personnel_personnelLanguages_0_language" name="homebundle_personnel[personnelLanguages][0][language]" style="float:left;width:40%">
<option value="5">FR</option>
<option value="1">EN</option>
</select>
</div>
<div>
<label for="homebundle_personnel_personnelLanguages_0_level" class="required"> </label>
<select id="homebundle_personnel_personnelLanguages_0_level" name="homebundle_personnel[personnelLanguages][0][level]" style="float:left;width:40%">
<option value="5">Good</option>
<option value="1">Bad</option>
</select>
</div>
</div>

Resolved, I must treat this in the twig's level :
<div style="float:left;width:40%" >
{{ form_widget(form.language) }}
</div>
<div style="float:left;width:40%" >
{{ form_widget(form.level) }}
</div>

use:
'row_attr' => [
'class' => 'yourClass',
],

Related

Codeigniter, when I try to update, the single quote displays as '

I like set_value. Every time, when I try to update the post, the single quote displays as &#039 ;. Not only single quote, some characters display too. Please, help me
Im using Codeigniter 3, Php 7
View
$description = array(
'name' => 'description',
'type' => 'text',
'placeholder' => 'description',
'class' => 'form-control',
'rows' => '3',
'value' => set_value('description', $post->INTRO_DESCRIPTION),
);
<div class="form-group">
<label for="description" class="col-md-2 control-label">Details</label>
<div class="col-md-10"><?php echo form_textarea($description); ?></div>
<div class="col-md-10"><?php echo form_error('description', '<div class="text-danger">', '</div>'); ?></div>
</div>
Well I found the solution. And it's very simple. Just adding "false" at end of the set_value.
set_value('description', $post->INTRO_DESCRIPTION, FALSE)

Symfony4 twig form - Customize / override form widget for radio button

I like to change the radio button alignment from vertical to horizontal. I knew i have to add 'form-check-inline' into the existing code <class = "form-check"> for it to happen.
Here are the conditions:
I used bootstrap_4_layout.html.twig as the base theme.
My FormType is :
->add('roles', ChoiceType::class, array(
'choices' => array(
'ADMIN' => 'ROLE_ADMIN',
'TEACHER' => 'ROLE_TEACHER',
),
'expanded' =>true,
'multiple' =>false
))
->get('roles')
->addModelTransformer(new CallbackTransformer(
function ($tagsAsArray) {
// transform the array to a string
return implode(', ', $tagsAsArray);
},
function ($tagsAsString) {
// transform the string back to an array
return explode(', ', $tagsAsString);
}
))
I already looked into form_div_layout.html.twig but I didn't know
which block to choose or how to customize/override it :
{%- block radio_widget -%}
{%- block widget_attributes -%}
{% block attributes -%}
I can arrange it use 'attr' in twig but it create a new <class> instead of overriding it :
{{ form_widget(form.roles, { 'attr': { 'class': 'form-check form-check inline'}}) }}
resulted :
<div id="task_type_transformer_roles" class="form-check form-check-inline">
<div class="form-check">
<input type="radio" id="task_type_transformer_roles_0" name="task_type_transformer[roles]" required="required" class="form-check-input" value="ROLE_ADMIN" />
<label class="form-check-label required" for="task_type_transformer_roles_0">ADMIN</label>
</div>
Thanks in advance.

How can I set class for choices label element?

How can I add label class for choices elements? Is that even possible without doing it in the twig template ?
Rendered form choice element:
<div>
<label class="required">Type</label>
<div id="AddNewAdType_type">
<input type="radio" id="AddNewAdType_type_0" name="AddNewAdType[type]" required="required" value="b">
<label for="AddNewAdType_type_0" class="required">one</label> // add css class here
<input type="radio" id="AddNewAdType_type_1" name="AddNewAdType[type]" required="required" value="s">
<label for="AddNewAdType_type_1" class="required">two</label> // add css class here
</div>
</div>
For example:
//...
->add("currency", "choice",[
'choices'=>[
'1' => 'one',
'2' => 'two'
],
'expanded' => true,
'choice_attr' =>[
'class' => 'cssClassName' //won't work
]
])
//...
->add("currency", "choice",[
'choices'=>[
'1' => 'one',
'2' => 'two'
],
'expanded' => true,
'label_attr' =>[
'class' => 'cssClassName'
]
])
cheers!

How to customize main form ID in Symfony2

I have problems with setting form wrapper custom ID. $options['attr']['id'] dont seem to work. All options passed to createForm() method seems to be ignored...
I'm working on Symfony 2.1 beta 1
Form setup:
$login_form = $this->createForm(new LoginType(), $user, array(
'attr' => array(
'id' => 'login-form'
)
));
which is passed to the view:
{{ form_widget(login_form) }}
But it produces:
<div id="login">
<div>
<label class="required">Mobile</label>
<input type="text" maxlength="255" required="required" name="login[mobile]" id="login_mobile">
</div>
<div>
<label class="required">Password</label>
<input type="text" maxlength="255" required="required" name="login[password]" id="login_password">
</div>
</div>
So the form wrapper have id="login", instead of "login-form"
I think that it can be done in form Class in a method:
public function getName()
{
return 'login-form';
}
Regards,
Max
How can this {{ form_widget(login_form) }} produce the code above like you say?
<div id="login">
<div>
<label class="required">Mobile</label>
<input type="text" maxlength="255" required="required" name="login[mobile]" id="login_mobile">
</div>
<div>
<label class="required">Password</label>
<input type="text" maxlength="255" required="required" name="login[password]" id="login_password">
</div>
</div>
This {{ form_widget(login_form) }} should render only this:
<div>
<label class="required">Mobile</label>
<input type="text" maxlength="255" required="required" name="login[mobile]" id="login_mobile">
</div>
<div>
<label class="required">Password</label>
<input type="text" maxlength="255" required="required" name="login[password]" id="login_password">
That div with id="login" in your code doesn't make no sense to me, it must be you that added manually that div, so you can change the id by yourself
After two years :)
You can override setDefaultOptions method of AbstractType. Tested in Symfony 2.5
class CommentType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->setMethod('POST')
->add('text', 'textarea', array('label' => ' ',
'attr' => array('class' => 'form-control',
'placeholder' => 'Your comment')
))
->add('folder_id', 'hidden', array('label' => ' ',
'attr' => array('class' => 'form-control',
'placeholder' => 'Your comment')
))
->add('link_id', 'hidden', array('label' => ' ',
'attr' => array('class' => 'form-control',
'placeholder' => 'Your comment')
))
->add('save', 'button', array('label' => 'Save',
'attr' => array('class' => 'btn-lg btn-primary')
)
);
}
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'Linkboard\FrontBundle\Document\comment',
'attr' => array('id' => 'comment-form')
));
}
public function getName()
{
return 'comment';
}
}
Generates something like;
<form name="comment" method="post" action="" id="comment-form">
.....
</form>

Overriding forms template Symfony2, twig elements?

i'm trying to override a template for some forms.
This one being one of them
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('nombreBD','text', array( 'required' => true, 'label' => 'Nombre Base de Datos: '))
->add('Servidor','choice', array(
'choices' => array('1' => 'Si', '0' => 'No'),
'required' => true,
'multiple' => false,
'expanded' => true,
'label' => 'Servidor Existente?',
))
->add('ServidorBD','entity',
array ('class' => 'MonseWebBundle:ServidoresBD',
'multiple' => true,
'required' => true,
'label' => 'Servidor de Base de Datos: ',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('u')
->orderBy('u.url', 'ASC');
},
))
;
}
And this being the template
{% block text_widget %}
<div class="round full-width-input" id="full-width-input">
<input type="text" {{ block('attributes') }} value="{{ value }}" >
</div>
{% endblock %}
I think i succeded in the text inputs but i've got no idea how to set up the ones for the entity and the ones for the radio buttons (choice) because i don't know where the information is stored. For example, i don't quite know what block ('attributes') nor {{value}] return. Same as i don't know how to make of the radiobuttons selected.
I wanted to use this:
<label for="dropdown-actions">Dropdown</label>
<select id="dropdown-actions">
<option value="option1">Select your action here</option>
</select>
for the entity "ServidoresBD" and this:
<label for="selected-radio" class="alt-label"><input type="radio" id="selected-radio" checked="checked" />A selected radio</label>
<label for="unselected-radio" class="alt-label"><input type="radio" id="unselected-radio" />An uselected radio</label>
for the radio buttons.
Also, for a weird reason, all the labels in ALL the project appear as upper-case, no matter what style i put them. ALWAYS and this is really annoying.
Any help would be greatly appreciated.
The default form theming is stored under the Twig bridge. Here, you can find all blocks which are defined in the form theme.
Just take a look to this file & IMO, you will understand what you need to do. :)
Hope that helps.