Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Do not put any empty div if label is disabled#19247

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Conversation

@soullivaneuh
Copy link
Contributor

@soullivaneuhsoullivaneuh commentedJun 30, 2016
edited
Loading

QA
Branch?2.7
Bug fix?yes
New feature?no
BC breaks?no
Deprecations?no
Tests pass?yes
Fixed tickets#18850,#18474
LicenseMIT
Doc PRN/A

This produces wrong alignments especially for form collections.

This PR is an alternative to#18504, fixing both#18850 and#18474 issues.

@lyrixx what do you think of this? Maybe I'm forgetting some edge cases, please tell me so we can discuss about it! 👍

cc@jongotlin

Application

With the following form type configuration:

$builder    ->add('name',null, ['label' =>'form.name','translation_domain' =>'global','text_suffix' =>'@'.$domain->getName(),    ])    ->add('destinations', CollectionType::class, ['label' =>'domain.form.mailalias_destinations','translation_domain' =>'front','allow_add' =>true,'allow_delete' =>true,'prototype' =>true,'by_reference' =>false,'entry_options' => ['label' =>false,'text_prefix' =>'@',        ],    ]);

The actual rendering looks like this:

image

Thanks to this PR, it's now:

image

chalasr, kirtixs, and yceruto reacted with thumbs up emoji
@soullivaneuhsoullivaneuhforce-pushed thetwig-form-bootstrap-empty-label-align branch fromae3f3e1 toaeb4de6CompareJune 30, 2016 15:10
{%else %}
col-sm-10
{%endif %}
{%endspaceless %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

You should use whitespace control modifiers instead of the spaceless tag.

soullivaneuh reacted with thumbs up emoji
Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

@jvasseur fixed.

@HeahDude
Copy link
Contributor

Prettier than#18504, looks great! Maybe a test would be good.

@greg0ire
Copy link
Contributor

This looks cleaner than having an empty div.

@soullivaneuh
Copy link
ContributorAuthor

Maybe a test would be good.

@HeahDude Do we have test suites on Symfony for templates? I would be glad to add some. Could you please indicate where to go?

greg0ire reacted with thumbs up emoji


{%blockform_group_class -%}
col-sm-10
{%iflabelissame as(false) -%}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Isn't there a need for a minus sign before theif ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

No, there isn't

greg0ire reacted with thumbs up emoji
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Thanks, just checking 👍

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

This is needed for white-space control.

If I remove it, I get:

<divclass="    col-sm-12">

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Oh you mean forblock! Indeed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Ok you're right@greg0ire, should be:

{%-blockform_group_class -%}    {%-iflabelissame as(false) -%}...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Are you sure ? minus for bothblock andif ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Yes this happens in a string not at the start of a block

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Ok… anyway I think@soullivaneuh checks what this produces, so…

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I did. And the actual state works correctly.

@HeahDude
Copy link
Contributor

There is alsohttps://github.com/symfony/symfony/blob/master/src/Symfony/Component/Form/Tests/AbstractTableLayoutTest.php but it should not be concerned here. Maybe it is :)

@soullivaneuh
Copy link
ContributorAuthor

@HeahDude I added a test. Please tell me if it looks OK.

@soullivaneuhsoullivaneuhforce-pushed thetwig-form-bootstrap-empty-label-align branch from830937e to66000e2CompareJune 30, 2016 15:45
@lyrixx
Copy link
Member

It looks good to me. But if you can attach screenshot before / after in the PR description, it would be very nice.

soullivaneuh and lyrixx reacted with thumbs up emoji

$form =$this->factory->createNamed('name','date',null,array('label' =>false));
$view =$form->createView();
$this->renderWidget($view);
$html =$this->renderLabel($view);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Consider not using the$form and$html OTVs

Copy link
Contributor

@HeahDudeHeahDudeJun 30, 2016
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Can be inlined inassertEmpty()

greg0ire reacted with thumbs up emoji
Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

This was just a copy paste of a similar test.

@soullivaneuh
Copy link
ContributorAuthor

@lyrixx I updated the PR body. 👍

Note: We can have one edge case AFAIK:

->add('test', TextType::class, ['mapped' =>false,'label' =>false,'attr' => ['placeholder' =>'My label goes here',    ]])

Renders:

image

I think this case is very rare comparing to the other, but can still happen.

Maybe could we have anattr "option" like you did with*-inline classes forcheckbox_widget andradio_widget?

col-sm-10
{%-endblockform_group_class %}
{%blockform_group_class %}
{%iflabelissame as(false) -%}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

missing whitespace control here to remove the indentation

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

You mean{%- if?

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Indeed, good catch!

@soullivaneuh
Copy link
ContributorAuthor

soullivaneuh commentedJun 30, 2016
edited
Loading

Also maybe we should create a new block for the form-group class? Because ATM, user will have to copy/paste the whole logic if they want to change it:

{%blockform_group_class %}    {%iflabelis notsame as(false) -%}        col-md-9    {%-else -%}        col-md-12    {%-endif %}{%endblockform_group_class %}

Or maybe aform_group_class andform_group_without_label_class?

@jongotlin
Copy link
Contributor

My two cents..

  1. Your code will still render theform-group-div. Maybe it's not wrong but having a form-group inside another form-group doesn't look good.
  2. I think it's a BC-break removing the "level one"-label column if the label is false. Even if it's rare doing so we should not change the behavior.

Can confirm the form I used in my pr looks the same with this code. 👍

@soullivaneuh
Copy link
ContributorAuthor

Your code will still render the form-group-div. Maybe it's not wrong but having a form-group inside another form-group doesn't look good.

Theform-group is needed to keep consistent margins. Otherwise, you will get something like this:

image

Consider this as a row for a form. AFAIK, we can make them nested.

I think it's a BC-break removing the "level one"-label column if the label is false. Even if it's rare doing so we should not change the behavior.

Please see#19247 (comment).

@jongotlin
Copy link
Contributor

We're solving two different thing here. Collections and nested forms. Consider my nested form type theform-group-div inside anotherform-group is not a clean solution.

Form from my pr

<divclass="form-group"><divclass="col-sm-12"><divid="foo_foo2"><divclass="form-group"><labelclass="col-sm-2 control-label required"for="foo_foo2_child">Child</label><divclass="col-sm-10"><inputtype="text"id="foo_foo2_child"name="foo[foo2][child]"required="required"class="form-control"/></div></div></div></div></div>

When rendering the collection type I see the need for it. Is there a way to know the difference between them?

Regarding BC-breaks. Yes, that comment is what I was thinking of. I don't think we should change the behavior and render the input the whole width.

@soullivaneuh
Copy link
ContributorAuthor

You mean about:

<divclass="form-group"><divclass="col-sm-12">

?

I don't see the issue. This is like having a.row and acol-sm-12 to me. This does not violate Bootstrap convention AFAIK.

@jongotlin
Copy link
Contributor

I mean

screenshot 2016-07-01 11 51 24

Maybe it's not wrong but having a lot of nested form types the markup wont look pretty.

@soullivaneuh
Copy link
ContributorAuthor

The code would be a lot complexified, not sure it worth it just for an esthetic case...

@lyrixx Could we please have your opinion for this and#19247 (comment)?

@jongotlin
Copy link
Contributor

Agreed! I'm more concerned about the BC-break.

soullivaneuh reacted with thumbs up emoji

{%blockform_group_class -%}
col-sm-10
{%-endblockform_group_class %}
{%blockform_group_class %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

missing space control at the end

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Space control added.


publicfunctiontestLabelNoDivIfFalse()
{
$this->assertEmpty(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Maybe you could use a consistent style here:

$view =$this->factory->createNamed('name','date',null,array('label' =>false))->createView();$this->assertEmpty($this->renderLabel($view),'The label should not be rendered');

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I honestly don't see the interest. You create a variable that will be used only once.

Why not simply pass the result to the function?

Copy link
Contributor

@greg0iregreg0ireSep 15, 2016
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

I second that. Seemore information about thoughtless one-time variables here. Note that OTVs can be used to break down complicated expressions, but I personally don't feel this is complicated enough to warrant an OTV.

If you need the variable because it clarifies things, maybe consider using a comment instead, you can even write whole sentences with them.

@fabpot
Copy link
Member

@soullivaneuh Looks like there aren't that many things to do to finish this one, can you have a look at the latest comments? Thanks.

soullivaneuh reacted with thumbs up emoji

This produces wrong alignments especially for form collections.
@soullivaneuh
Copy link
ContributorAuthor

soullivaneuh commentedSep 15, 2016
edited
Loading

@fabpot I corrected the review and answered for this one:#19247 (comment)

Also I think I could add a commit to improve a little the process.

IMHO, we should introduce some new blocks:

  • form_group_without_label_class: Class to put when no label
  • form_group_with_label_class: Class to put with an existing label

With the current state of this PR, if we want to change the col classes like this:

{%use'bootstrap_3_horizontal_layout.html.twig' %}{%blockform_label_class -%}    col-sm-3{%-endblockform_label_class %}

We will have a broken form like this:

image

So we have to overrideform_group_class too. But in this case, we have to copy/paste the vendor logic:

{%blockform_group_class -%}    {%-iflabelissame as(false) -%}        col-sm-12    {%-else -%}        col-sm-9{# This is the ONLY real override here#}    {%-endif -%}{%-endblockform_group_class %}

If we have the two blocks I proposed, this will just looks like this (final state):

{%use'bootstrap_3_horizontal_layout.html.twig' %}{%blockform_label_class -%}    col-sm-3{%-endblockform_label_class %}{%blockform_group_with_label_class -%}    col-sm-9{%-endblockform_group_with_label_class %}

What do you think? Maybe we can find a simplier solution for block name, I waiting your feedbacks for that. But I think we really should avoid the ugly copy/paste constraint.

@soullivaneuhsoullivaneuhforce-pushed thetwig-form-bootstrap-empty-label-align branch from2c059f2 to6efc6b2CompareSeptember 15, 2016 08:43
@javiereguiluz
Copy link
Member

@soullivaneuh would it make sense to only introduce a new block calledform_group_without_label_class and keep the existing block for the common case of having a label?

@javiereguiluzjaviereguiluz added this to the3.2 milestoneNov 7, 2016
@fabpotfabpot removed this from the3.2 milestoneNov 16, 2016
@nicolas-grekasnicolas-grekas added this to the2.7 milestoneDec 6, 2016
@soullivaneuh
Copy link
ContributorAuthor

Sorry guys, but I don't have any more time to work on this PR right now.

I allowed edit from maintainer, if anyone want to continue it.

@fabpot
Copy link
Member

@javiereguiluz@HeahDude Can you take over this one? Or anyone else wanting to take over?

@fabpot
Copy link
Member

Closing as there is apparently nobody wanting to take over this PR. Feel free to reopen.

@fabpotfabpot closed thisOct 1, 2017
@soullivaneuhsoullivaneuh deleted the twig-form-bootstrap-empty-label-align branchJanuary 14, 2018 13:17
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment

Reviewers

1 more reviewer

@greg0iregreg0iregreg0ire left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Projects

None yet

Milestone

2.7

Development

Successfully merging this pull request may close these issues.

11 participants

@soullivaneuh@HeahDude@greg0ire@lyrixx@jongotlin@fabpot@javiereguiluz@stof@jvasseur@nicolas-grekas@carsonbot

[8]ページ先頭

©2009-2025 Movatter.jp