Opened 11 years ago
Closed 11 years ago
#20787 closed Bug (worksforme)
Django template changes width of html element during append
| Reported by: | Owned by: | nobody | |
|---|---|---|---|
| Component: | Template system | Version: | 1.5 |
| Severity: | Normal | Keywords: | template css width |
| Cc: | Triage Stage: | Unreviewed | |
| Has patch: | no | Needs documentation: | no |
| Needs tests: | no | Patch needs improvement: | no |
| Easy pickings: | no | UI/UX: | no |
Description
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>
Attachments (1)
Change History (12)
comment:1 by , 11 years ago
follow-up: 4 comment:2 by , 11 years ago
| Resolution: | → worksforme |
|---|---|
| Severity: | Release blocker → Normal |
| Status: | new → closed |
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.
by , 11 years ago
| Attachment: | widthbug.zip added |
|---|
comment:3 by , 11 years ago
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:
- 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>.
- I am using Firefox 22.0, although the problem also shows in IE.
- I am using Django 1.5.1
- Please, use the Django development server while testing.
- 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.
comment:4 by , 11 years ago
| Resolution: | worksforme |
|---|---|
| Status: | closed → new |
Replying to 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.
follow-up: 6 comment:5 by , 11 years ago
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
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
comment:6 by , 11 years ago
Replying to 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.
comment:7 by , 11 years ago
| Resolution: | invalid |
|---|---|
| Status: | closed → new |
follow-up: 9 comment:8 by , 11 years ago
Could you please try this with a server other than the Django development server?
comment:9 by , 11 years ago
Replying to 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?
comment:10 by , 11 years ago
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.
comment:11 by , 11 years ago
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
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.
"background_color" should be "background-color", but it does not matter, since it does not fix the problem.