CODEWITHSUNDEEP
djangotwitter-bootstrapdjango-templatestwitter-bootstrap-3
user650108
user650108

Reputation: 1019

Django spaceless template tag breaks Bootstrap rendered content

Django templating language comes with a nice {% spaceless %}...{% endspaceless %} tag which allow to remove every whitespace, tab, newline... between html tags.

The problem is that Bootstrap seems to be "space sensitive": when using spaceless, form elements such as inputs and buttons are "sticked" each other.

Here is a an illustration: http://jsfiddle.net/KNkqF/ is not rendered as http://jsfiddle.net/E5rU5/ !

Have you ever faced this problem and did you manage to get rid of it without avoiding Django spaceless?

Upvotes: 1

Views: 482

Answers (1)

teewuane
teewuane

Reputation: 5734

Bootstrap is setting those input elements to display: inline-block; and not floating or setting them to display as display: block;. You may want to hard code a   in between the inputs to force the space.

<span style="display:block; float:left;">hello</span> <span style="display:block; float:left;">world</span>

The two spans above will line up right next to each other even though there is a space between them results in "helloworld".

<span>hello</span> <span>world</span>

The two spans above will have a space between them result in "hello world"

<span>hello</span><span>world</span>

Will result in.. "helloworld".

I've never used spaceless in a form before but because it is cleaning up all of the spaces this would do it.

Are you using django-bootstrap-form or handwriting your forms?

Upvotes: 1

Related Questions