Tiny cosmetic issue: space between buttons in FormActions (Bootstrap)

[EugeneDae]

This code, when using the Bootstrap template

FormActions(
    Submit('save_changes', 'Save', css_class='btn-primary'),
    Submit('cancel', 'Cancel'),
)

generates the following

As you can see the buttons are aligned contiguously because there is no space between <input> tags, while all Bootstrap examples include the space.

A workaround would be to include HTML('‌') between Submits (and   wouldn't do because for some reason it generates two spaces), but I think it should be fixed somewhere in templates. Here's how they should look:

Thanks for attention to my super tiny issue :)

[twang817]

.form-actions input {
    margin: 0 2px;
}

[EugeneDae]

Sure, but just adding a space symbol to the template is much better.

[twang817]

I don't disagree. But the simplest fix for now is a rule. You don't have to stick HTML(...) everywhere.

[maraujop]

Thanks for the heads up Dae,

Also thanks @alydis for trying to help in the bug tracker, I appreciate it.

I've pushed a fix for this issue in the dev branch, that will hopefully be released as 1.2.0 stable version today or tomorrow the latest.

Feel free to close the issue if you consider it solved.

Cheers,
Miguel

[jarcoal]

Just letting you guys know that this fix breaks some fluid field layouts; it adds an unwanted margin on the bottom of the input[type=button].

[perry]

This adds a huge margin to the bottom of the form when the children are floated.

[jarcoal]

Yeah this change should definitely get reverted, it breaks a lot of layouts. BTW perry a "line-height: 0" on the container for the input removes the bottom margin, but it will likely have some other side effects depending on your situation.

[maraujop]

Ok, I'm going to be reverting it.

Anyone has a suggestion on how to space buttons ? If I revert this, we will have buttons stick together. In the beginning bootstrap CSS spaced buttons, but apparently not anymore. If I copy paste bootstrap's form-actions example, the result is not the one they have on the site and I don't know why.

[perry]

@jarcoal yeah I did try that, but it did cause other problems. I've just overwritten the template for the time being.

@maraujop the spacing on the bootstrap example is caused by the buttons being display: inline-block and there being whitespace between them in the HTML.

[maraujop]

Hi @perry I've been working on a fix for this, that didn't involve removing {% spaceless %} tags. I've crafted a tag named {% specialspaceless %} that injects spaces after buttons and inputs, without using ‌, which should fix the layouts problems.

It's all in specialspaceless branch, if you or someone else could test it and confirm this solves the issue, I could merge it into dev before releasing 1.2.1.

Thanks, cheers
Miguel

[perry]

@maraujop sorry for the delayed reply. That looks great, and works fine for me!

Cheers,

Perry

[maraujop]

Thanks a lot Perry for confirming it. I've just merged specialspaceless into dev branch.

Cheers,
Miguel

[maraujop]

I've released version 1.2.1, so I'm closing the issue. Thanks