Skip to content

[Form] Nested form type renders ugly bootstrap horizontal form #18474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jongotlin opened this issue Apr 7, 2016 · 11 comments
Closed

[Form] Nested form type renders ugly bootstrap horizontal form #18474

jongotlin opened this issue Apr 7, 2016 · 11 comments

Comments

@jongotlin
Copy link
Contributor

I've got a bootstrap-form issue I can’t figure out if it's a real issue or not.

I’m having a form type with a nested form type and are rendering it with {{ form_widget(form) }}. The nested type will get a wrapping form-group and an extra col-sm-2-class making the form look ugly.
screenshot 2016-04-07 20 20 48

An easy solution would be to render the type with {{ form_widget(form.foo) }} but I think there should be a way to render the whole form with just passing the form to form_widget.

Modifying the block form_row to only render the bootstrap markup and label if form.children is empty solves it but it's kinda dramatic and might not be the wanted solution. Please give me advice before I eventually open a pr for it.

@jongotlin jongotlin changed the title Nested form type renders ugly bootstrap horizontal form [Form] Nested form type renders ugly bootstrap horizontal form Apr 7, 2016
@javiereguiluz
Copy link
Member

@jongotlin how would you like to see that form rendered? Could you share a screenshot of some quick mockup proposal? Thanks!

@jongotlin
Copy link
Contributor Author

The form should render like this imo
screenshot 2016-04-11 10 43 53

These are the form types used

// FooType
$builder
    ->add('test', TextType::class)
    ->add('foo', BarType::class)
;
// BarType
$builder->add('child', TextType::class);

It can be solved by changing bootstrap_3_horizontal_layout.html.twig to

{% block form_row -%}
+    {% if form.children|length == 0 %}
        <div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}">
            {{- form_label(form) -}}
            <div class="{{ block('form_group_class') }}">
+    {% endif %}
    {{- form_widget(form) -}}
    {{- form_errors(form) -}}
+    {% if form.children|length == 0 %}
            </div>
        </div>
+    {% endif %}
{%- endblock form_row %}

But I' not sure what side effects that will cause...

@HeahDude
Copy link
Contributor

For a compound class, the choice is up to the dev just use:

$builder->add('foo', SomeCompoundType::class, array('label' => false));

For handling the label and the block with no child, there is a work in progress (maybe for 3.2 :), see #17609.

@jongotlin
Copy link
Contributor Author

@HeahDude, that's not the case when using the horizontal theme. The Bootstrap divs are rendered even though the label isn't. See
screenshot 2016-04-11 11 25 12

@HeahDude
Copy link
Contributor

So this is a nice improvement! 👍

@HeahDude
Copy link
Contributor

Wouldn't that change better fit by overriding form_rows block instead ? maybe it could use only one if ?

@HeahDude
Copy link
Contributor

Or maybe the fix should just to be a new line after the parent label ?
In that way using false just makes the line disappear.
Why this label would not be printed ? It would not be consistent with other templates.
What do you think ?

@jongotlin
Copy link
Contributor Author

Overriding form_rows wont fix it if using form_row(form.foo) directly from the template.
Yes, maybe the extra column should be removed only if label is false. I'll open a pr for it.

@carsonbot
Copy link

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

@carsonbot
Copy link

Just a quick reminder to make a comment on this. If I don't hear anything I'll close this.

@carsonbot
Copy link

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants