Code

Opened 9 months ago

Closed 9 months ago

#20787 closed Bug (worksforme)

Django template changes width of html element during append

Reported by: gregoryronin@… 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)

widthbug.zip (8.1 KB) - added by anonymous 9 months ago.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 9 months ago by anonymous

  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset

"background_color" should be "background-color", but it does not matter, since it does not fix the problem.

comment:2 follow-up: Changed 9 months ago by claudep

  • Resolution set to worksforme
  • Severity changed from Release blocker to Normal
  • Status changed from new to 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.

Changed 9 months ago by anonymous

comment:3 Changed 9 months ago 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>.
  1. I am using Firefox 22.0, although the problem also shows in IE.
  1. I am using Django 1.5.1
  1. Please, use the Django development server while testing.
  1. 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 in reply to: ↑ 2 Changed 9 months ago by anonymous

  • Resolution worksforme deleted
  • Status changed from closed to 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.

comment:5 follow-up: Changed 9 months ago by timo

  • Resolution set to invalid
  • Status changed from new to 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 in reply to: ↑ 5 Changed 9 months ago by anonymous

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 Changed 9 months ago by anonymous

  • Resolution invalid deleted
  • Status changed from closed to new

comment:8 follow-up: Changed 9 months ago by timo

Could you please try this with a server other than the Django development server?

comment:9 in reply to: ↑ 8 Changed 9 months ago by anonymous

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 Changed 9 months ago 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.

comment:11 Changed 9 months ago by ramiro

  • Resolution set to worksforme
  • Status changed from new to 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.

Add Comment

Modify Ticket

Change Properties
<Author field>
Action
as closed
as The resolution will be set. Next status will be 'closed'
The resolution will be deleted. Next status will be 'new'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.