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

Closed
EugeneDae opened this Issue Jun 29, 2012 · 13 comments

Comments

Projects
None yet
5 participants
@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('&zwnj;') between Submits (and &nbsp; 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

This comment has been minimized.

Show comment
Hide comment
@twang817

twang817 Jul 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@EugeneDae

EugeneDae Jul 10, 2012

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

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

@twang817

This comment has been minimized.

Show comment
Hide comment
@twang817

twang817 Jul 10, 2012

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

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

maraujop added a commit that referenced this issue Jul 29, 2012

Adding a space after buttons
This should fix cosmetic issue #GH-62 using HTML, as bootstrap doesn't
now have CSS spacing by default.
@maraujop

This comment has been minimized.

Show comment
Hide comment
@maraujop

maraujop Jul 29, 2012

Collaborator

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

Collaborator

maraujop commented Jul 29, 2012

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

@maraujop maraujop closed this Sep 24, 2012

@jarcoal

This comment has been minimized.

Show comment
Hide comment
@jarcoal

jarcoal Oct 29, 2012

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].

jarcoal commented Oct 29, 2012

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 comment has been minimized.

Show comment
Hide comment
@perry

perry Nov 9, 2012

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

perry commented Nov 9, 2012

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

@jarcoal

This comment has been minimized.

Show comment
Hide comment
@jarcoal

jarcoal Nov 10, 2012

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.

jarcoal commented Nov 10, 2012

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

This comment has been minimized.

Show comment
Hide comment
@maraujop

maraujop Nov 10, 2012

Collaborator

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.

Collaborator

maraujop commented Nov 10, 2012

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.

@maraujop maraujop reopened this Nov 10, 2012

@perry

This comment has been minimized.

Show comment
Hide comment
@perry

perry Nov 10, 2012

@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.

perry commented Nov 10, 2012

@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 added a commit that referenced this issue Nov 22, 2012

Added specialspaceless tag
This tag will be used to remove white spaces between tags, but leave
spaces after buttons and inputs, necessary for formatting buttons with
Boostrap.

Related to #62
@maraujop

This comment has been minimized.

Show comment
Hide comment
@maraujop

maraujop Nov 22, 2012

Collaborator

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 &zwnj;, 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

Collaborator

maraujop commented Nov 22, 2012

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 &zwnj;, 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

This comment has been minimized.

Show comment
Hide comment
@perry

perry Nov 27, 2012

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

Cheers,

Perry

perry commented Nov 27, 2012

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

Cheers,

Perry

@maraujop

This comment has been minimized.

Show comment
Hide comment
@maraujop

maraujop Nov 27, 2012

Collaborator

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

Cheers,
Miguel

Collaborator

maraujop commented Nov 27, 2012

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

Cheers,
Miguel

@maraujop

This comment has been minimized.

Show comment
Hide comment
@maraujop

maraujop Nov 28, 2012

Collaborator

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

Collaborator

maraujop commented Nov 28, 2012

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

@maraujop maraujop closed this Nov 28, 2012

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