bootstrap_3_layout.html.twig with inline-form has no spacing

[flaushi]

Q	A
Bug report?	yes
Symfony version	3.4

Hi,
I am using the bootstrap_3_layout.html.twig and configure the following form:

$data = [
            'startDate' => new DateTime('2017-10-01'),
            'endDate' => new DateTime('2017-12-31'),
            'reportDate' => new DateTime()];        
        
        $builder = $this->createFormBuilder($data, ['attr' => ['class' => 'form-inline']]);
        $builder
            ->add('startDate', DateType::class, [
                'label' => 'Von: ', 
                'html5' => true, 
                'widget' => 'single_text'])
            ->add('endDate', DateType::class, [
                'label' => 'Bis: ', 
                'html5' => true, 
                'widget' => 'single_text'])
            ->add('reportDate', DateType::class, [
                'label' => 'Berichtsdatum: ', 
                'html5' => true, 
                'widget' => 'single_text'])
            ->add('save', SubmitType::class, array('label' => 'Aktualisieren', 'attr' => ['class'=> 'btn-success']));

as result, I see the following:

So, there is no space between the form elements.

The created html looks fine, however, I have read here that maybe a only a space/newline is missing?

This Fiddle shows my created html code. If you just click on "Tidy" the newlines are created and the spaces appear.

[Nyholm]

This sure is an interesting issue. I can confirm that this behavior is reproducible. However, reading the boostap docs: http://getbootstrap.com/docs/3.3/css/#forms, I see that inline forms are expected to have like this.

Ie, there is nothing we could do about it. You should remove "form-inline" and you will be better off. (maybe 😕 )

Here is an image from the docs:

I suggest closing this issue.

[flaushi]

Well if the code to render the html form would just output a newline character after each form element, the problem would be solved.

[Nyholm]

Im not sure that is correct. HTML does not really care about new lines.

[flaushi]

but the newline character would be interpreted like a space character. You have to understand that the browsers interpret the form fields like "one word" because there is absolutely no space between them. Try my fiddle, as soon as you give a space or newline, the form is displayed correctly.

[Nyholm]

I did try your fiddle. I did not see any difference from before and after clicking the "tidy" button.

[flaushi]

which browser are you using? on my chrome, I see a difference if i just up a newline after each form-group-div:

https://jsfiddle.net/u12zhaqn/2/

[Nyholm]

Im on Firefox and Safari. Same results. Same in your fiddle and same on the bootstrap docs. I cannot see that whitespace matters.

[flaushi]

Now I also tried with Safari, and I do see a difference. Please try these two fiddles:
https://jsfiddle.net/u12zhaqn/ (original code as generated by symfony)
https://jsfiddle.net/u12zhaqn/5/ (with a newline after each <div class="form-group">..</div>)

This is the original output (this time on Safari):

and this is the result with newlines (/5/):

And there is a difference obviously, right?

[xabbuh]

@flaushi Would you like to send a pull request?

[javiereguiluz]

Maybe I missed something, but if we are talking about "inline forms", then the proposed change doesn't make sense to me. "Inline forms" display all fields in the same line (and in Bootstrap examples you'll see that most of the times they hide the labels).

The proposal here changes the default "inline form" design completely ... so I think it'd be better to not use "inline form" in this case and use normal forms and control the length of each field to display them in a single row.

[flaushi]

I think you misunderstood the problem. I was not complaining about the label, I am missing the little margin between the text input fields.
If there is no space or newline in the HTML code, then the rendered result in a browser misses the little margin. I tried to change the template to create a PR, but did not find the position where the change must be done.

[xabbuh]

@flaushi Can you confirm that #30922 fixes this issue?

[flaushi]

Perfect, thanks!!!

[xabbuh]

Thank you for the confirmation. 👍