Symfony4 twig form - Customize / override form widget for radio button
0
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.
forms twig customization symfony4
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
add a comment |
0
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.
forms twig customization symfony4
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
I don't really understand because as far as I can tell it already works. See codeply.com/go/aGWRU1nYkf for an example.
– Dirk J. Faber
Nov 24 '18 at 12:30
Yes, its worked by using 'attr' but then is it okay in terms of css best practices to have two 'form-check' classes withing that radio block/widget ? When i see the result of that, my initial thought is that is no so clean.
– yfsymfony
Nov 24 '18 at 12:54
It might not be best, but it isn't a problem as long your layout doesn't suffer. You can however get rid of the firstform-checkclass like here: codeply.com/go/Ptrdr9gQl0
– Dirk J. Faber
Nov 24 '18 at 14:55
Oh okay, i'll use your suggestion then, which is just add the 'form-check-inline' to the 'attr' 'class' . Thanks.
– yfsymfony
Nov 24 '18 at 15:28
add a comment |
0
0
0
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.
forms twig customization symfony4
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
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.
forms twig customization symfony4
forms twig customization symfony4
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
edited Nov 24 '18 at 11:25
Dirk J. Faber
1,3021317
1,3021317
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
asked Nov 24 '18 at 2:39
yfsymfonyyfsymfony
11
11
I don't really understand because as far as I can tell it already works. See codeply.com/go/aGWRU1nYkf for an example.
– Dirk J. Faber
Nov 24 '18 at 12:30
Yes, its worked by using 'attr' but then is it okay in terms of css best practices to have two 'form-check' classes withing that radio block/widget ? When i see the result of that, my initial thought is that is no so clean.
– yfsymfony
Nov 24 '18 at 12:54
It might not be best, but it isn't a problem as long your layout doesn't suffer. You can however get rid of the firstform-checkclass like here: codeply.com/go/Ptrdr9gQl0
– Dirk J. Faber
Nov 24 '18 at 14:55
Oh okay, i'll use your suggestion then, which is just add the 'form-check-inline' to the 'attr' 'class' . Thanks.
– yfsymfony
Nov 24 '18 at 15:28
add a comment |
I don't really understand because as far as I can tell it already works. See codeply.com/go/aGWRU1nYkf for an example.
– Dirk J. Faber
Nov 24 '18 at 12:30
Yes, its worked by using 'attr' but then is it okay in terms of css best practices to have two 'form-check' classes withing that radio block/widget ? When i see the result of that, my initial thought is that is no so clean.
– yfsymfony
Nov 24 '18 at 12:54
It might not be best, but it isn't a problem as long your layout doesn't suffer. You can however get rid of the firstform-checkclass like here: codeply.com/go/Ptrdr9gQl0
– Dirk J. Faber
Nov 24 '18 at 14:55
Oh okay, i'll use your suggestion then, which is just add the 'form-check-inline' to the 'attr' 'class' . Thanks.
– yfsymfony
Nov 24 '18 at 15:28
I don't really understand because as far as I can tell it already works. See codeply.com/go/aGWRU1nYkf for an example.
– Dirk J. Faber
Nov 24 '18 at 12:30
I don't really understand because as far as I can tell it already works. See codeply.com/go/aGWRU1nYkf for an example.
– Dirk J. Faber
Nov 24 '18 at 12:30
Yes, its worked by using 'attr' but then is it okay in terms of css best practices to have two 'form-check' classes withing that radio block/widget ? When i see the result of that, my initial thought is that is no so clean.
– yfsymfony
Nov 24 '18 at 12:54
Yes, its worked by using 'attr' but then is it okay in terms of css best practices to have two 'form-check' classes withing that radio block/widget ? When i see the result of that, my initial thought is that is no so clean.
– yfsymfony
Nov 24 '18 at 12:54
It might not be best, but it isn't a problem as long your layout doesn't suffer. You can however get rid of the first
form-check class like here: codeply.com/go/Ptrdr9gQl0– Dirk J. Faber
Nov 24 '18 at 14:55
It might not be best, but it isn't a problem as long your layout doesn't suffer. You can however get rid of the first
form-check class like here: codeply.com/go/Ptrdr9gQl0– Dirk J. Faber
Nov 24 '18 at 14:55
Oh okay, i'll use your suggestion then, which is just add the 'form-check-inline' to the 'attr' 'class' . Thanks.
– yfsymfony
Nov 24 '18 at 15:28
Oh okay, i'll use your suggestion then, which is just add the 'form-check-inline' to the 'attr' 'class' . Thanks.
– yfsymfony
Nov 24 '18 at 15:28
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454726%2fsymfony4-twig-form-customize-override-form-widget-for-radio-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454726%2fsymfony4-twig-form-customize-override-form-widget-for-radio-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't really understand because as far as I can tell it already works. See codeply.com/go/aGWRU1nYkf for an example.
– Dirk J. Faber
Nov 24 '18 at 12:30
Yes, its worked by using 'attr' but then is it okay in terms of css best practices to have two 'form-check' classes withing that radio block/widget ? When i see the result of that, my initial thought is that is no so clean.
– yfsymfony
Nov 24 '18 at 12:54
It might not be best, but it isn't a problem as long your layout doesn't suffer. You can however get rid of the first
form-checkclass like here: codeply.com/go/Ptrdr9gQl0– Dirk J. Faber
Nov 24 '18 at 14:55
Oh okay, i'll use your suggestion then, which is just add the 'form-check-inline' to the 'attr' 'class' . Thanks.
– yfsymfony
Nov 24 '18 at 15:28