[Django] #20787: Django template changes width of html element during append
Django
---------------------------------+--------------------------------
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Severity: Release blocker | Keywords: template css width
Triage Stage: Unreviewed | Has patch: 0
Easy pickings: 0 | UI/UX: 0
---------------------------------+--------------------------------
I filed this issue with stackoverflow.com under the same title. This looks
like a Django problem to me. Here is the description:
Below you will find the HTML code. The problem is that: if you try to load
the specified below HTML code into the browser directly, both alerts
(before placement onto "body" and after) will give you width=498px as
expected.
However, if you set it up as Django template and run with Django
development server, the second alert (after placement onto "body") will
give you a slightly different number depending on the browser: Firefox
gives 497.76666px, IE gives 498.1px. I have not checked other browsers.
It is important to note, that it is that combination of css attributes
("left", "top", "width", "height", "border-width", "background_color",
"border-style") that shows the problem. If you remove at least one of
them, the problem goes away.
If you happen know what is going on and/or what the viable workaround is,
I would really appreciate it. Thanks. Here is the code:
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var my_element = $("<div/>")
.addClass("my_element")
.attr("id", "my_element1")
.css("position", "absolute")
.css("left", "0px")
.css("top", "0px")
.css("width", "498px")
.css("height", "300px")
.css("border-width", "1px")
.css("background_color", "#999966")
.css("border-style", "solid");
alert("width:" + my_element.css("width"));
$("body").append(my_element);
alert("width:" + my_element.css("width"));
});
</script>
</head>
<body>
</body>
</html>
--
Ticket URL: <https://code.djangoproject.com/ticket/20787>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by anonymous):
* needs_better_patch: => 0
* needs_tests: => 0
* needs_docs: => 0
Comment:
"background_color" should be "background-color", but it does not matter,
since it does not fix the problem.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:1>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: closed
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Changes (by claudep):
* status: new => closed
* resolution: => worksforme
* severity: Release blocker => Normal
Comment:
I tried with Firefox with Django master and Django 1.5 and didn't
reproduce the issue.
It would be *very* strange that Django would apply any transformation on
your template content.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:2>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: closed
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Comment (by anonymous):
Hi, thanks for looking into it. However, I have to reopen the bug since I
am still seeing the issue clearly and it happens only with Django
development server. Perhaps, the best way would be for me to provide the
exact setup and the files I am running with:
1. First of, please, see the the zipped attachment of the Django project.
It has all the files and subdirectories. The only thing you will need to
modify is one line in settings.py file:
- in the DATABASES setting, in the 'NAME' entry, put your path to the db
file, instead of <path-to-DB-directory>.
2. I am using Firefox 22.0, although the problem also shows in IE.
3. I am using Django 1.5.1
4. Please, use the Django development server while testing.
5. I was able to isolate the problem a bit further, the problem occurs
when the following css settings are used at the same time: "width",
"border-width", "border-style". See, the template file and run with it.
Thanks.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:3>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Changes (by anonymous):
* status: closed => new
* resolution: worksforme =>
Comment:
Replying to [comment:2 claudep]:
> I tried with Firefox with Django master and Django 1.5 and didn't
reproduce the issue.
> It would be *very* strange that Django would apply any transformation on
your template content.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:4>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: closed
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Changes (by timo):
* status: new => closed
* resolution: => invalid
Comment:
This is very doubtful to be an issue with Django, but is perhaps a
difference in the way browsers interpret content received from a server
versus a local HTML file. You might try enclosing your jQuery in a
`$(document).ready()`. Unfortunately, this ticket tracker isn't a place to
get help with issues like this, please see:
https://code.djangoproject.com/wiki/TicketClosingReasons/UseSupportChannels
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:5>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: closed
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Comment (by anonymous):
Replying to [comment:5 timo]:
> This is very doubtful to be an issue with Django, but is perhaps a
difference in the way browsers interpret content received from a server
versus a local HTML file. You might try enclosing your jQuery in a
`$(document).ready()`. Unfortunately, this ticket tracker isn't a place to
get help with issues like this, please see:
>
>
https://code.djangoproject.com/wiki/TicketClosingReasons/UseSupportChannels
The $(document).ready() gives the same issue, but I understand, this issue
is quite involved: JQuery, Django, the browser. I also understand that it
is doubtful that the problem is in Django, but it still can be, unless it
is 100% proven. For instance, JQuery people referred me to Django
development when I asked the same on their website. As I have stated, the
issue occurs only when I am running with Django development server and
that is why I filed the bug here. I have provided the full set of files
and the setup and all I ask is for somebody to reproduce the issue and to
determine for sure if the problem is in Django or not, and once it is
reproduced it might become clearer where the problem is. Please, help.
Thank you in advance.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:6>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Changes (by anonymous):
* status: closed => new
* resolution: invalid =>
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:7>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Comment (by timo):
Could you please try this with a server other than the Django development
server?
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:8>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Comment (by anonymous):
Replying to [comment:8 timo]:
> Could you please try this with a server other than the Django
development server?
Unfortunately, I do not have one installed yet, that is why I am running
with Django development server. Is it an issue on your side to test the
provided Django project directories with the development center?
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:9>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: new
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Comment (by timo):
I don't believe this is a problem with Django, so I'm not particularly
interested in looking at it. If you can provide more evidence that this
really is an issue with Django, you are more likely to get some help,
although Django is a community project and we are not here to solve your
problems.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:10>
Django
Reporter: gregoryronin@… | Owner: nobody
Type: Bug | Status: closed
Component: Template system | Version: 1.5
Keywords: template css width | Triage Stage: Unreviewed
Easy pickings: 0 | UI/UX: 0
Changes (by ramiro):
* status: new => closed
* resolution: => worksforme
Comment:
Tested with the Django 1.5.1 development server, Firefox 22.0. I get:
{{{
width: 498px
}}}
twice.
Closing the ticket again. Please research other possible sources of the
bug, and if you still find it is related to Django in any way please ask
for help in any of the community support channels instead of reopening the
ticket.
--
Ticket URL: <https://code.djangoproject.com/ticket/20787#comment:11>