I am writing out a table using just the template system in Django, and it is not showing the border around empty table cells.
No problem I thought - I've solved this problem before. I put   in any cell that was to be left empty. Django kindly converted the ampersand to & so that I have &nbsp in the empty cells, and it shows the   when viewed in the browser.
I googled it, and tried putting {%autoescape off%} and {%endautoescape%} around the table in question, but it didn't do any good either.
I also tried adding autoescape=False to the context constructor, but that didn't help either.
What's the magic trick to make Django show the border around empty cells?
This is a known CSS/HTML 'problem.' You want to use Django's "default" filter.
{{value|default:" "}}
(I'll be damned if I could get that to come out right. In SO, how do you write "nbsp;" without the & in front causing everything to disappear and be replaced by a blank?)
There is the empty cells CSS property.
http://www.w3.org/TR/CSS21/tables.html#empty-cells
I can't remember if it works in all browsers or not though
Django does in no way control the appearance of your table. Tinkering with autoescape is also superfluous and could turn out dangerous.
Are you using CSS for styling the table? By using a property like e.g.
td {
border: 1px solid red;
}
you can make each cell having a red border. No matter if it's empty or not.
What you really need to do is get a non-breaking space in those empty cells, and prevent Django from escaping the HTML entity. Could you chain a few filters together to achieve what you're looking for?
{{ value|default:" "|safe }}
Edit: I should mention that is the same as , is just doesn't get mangled by the SO parser.
Related
I'm using pdfkit to generate a PDF of a Django template (doing this by getting an HTML string of the page from Django's get_template and render functions and passing that string to pdfkit... see post).
On this page, I have some TextArea's that can contain many lines of text, and by default, they just get cut off when generating the PDF.
I've tried to fix this by using some javascript libraries (I've tried several) to automatically expand the TextAreas on page load. I can get these to work perfectly on normal pages, but when I try to include it on the PDF template, I get various errors ranging from not working at all to expanding the TextArea way too much. My first assumption was that there was some styling differences that were causing the issues, but I'm fairly certain I've ruled that out. I tried to load the PDF template directly as a view, and the TextArea's resized correctly, leading me to believe that there's something with pdfkits generation that isn't playing nicely with the resizing.
Given this, I tried to look if pdfkit has any suggestions for issues like this and couldn't find any, and I also tried to use different input types other than TextAreas, none of which were able to display newlines correctly.
I can't think of any other potential solutions at this point, and I'm open to suggestions. Please let me know if you feel I should provide additional information, and thank you in advance.
I ended up finding a relatively simple fix. Because I was using django forms, I was pretty easily able to change from displaying the form Textarea:
{{ form.paragraph_data }}
to displaying just the plain text:
{{ form.paragraph_data.initial }}
However, this initially caused the newlines to not display correctly, because HTML doesn't process them in a plain string. So I added some processing in the creation of the form to replace the newlines with <br />s:
form.fields['paragraph_data'].initial = form.fields['paragraph_data'].initial.replace('\n', '<br />')
Finally, I had to add the safe filter to Django templating line to tell it to actually render the HTML rather than cleansing it:
{{ form.paragraph_data.initial|safe }}
Again, this was partially easy because of Django forms, but it should translate relatively easily to a more standard javascript/html solution.
I am using coffeescript with react-rails gem. In the measure.js.coffee, there is no span present in the coffee code, but when the HTML is getting painted a mysterious ghost span is appearing. Below is a screenshot of code and HTML generated by it.
In my code, there is no span in between carousel-mImages and mtag-images. Is it because of the reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
Yes, ReactCSSTransitionGroup is a wrapper around ReactTransitionGroup.
And from the official docs here:
By default ReactTransitionGroup renders as a span.
You can change this behavior, and render as another type of component, but this would mean you have to manually configure and render the ReactTransitionGroup.
This may save you one wrapper element in the DOM, but this depends on your component tree structure.
I was always under the impression that django form errors would have a small popup near the form field that explained the error, something like this. Instead, mine are rendering in the cell next to the field and completely screwing up the alignment of my table causing everything to look ugly, like this. Is there any common troubleshooting for this. Is it because I am using the as_table shortcut to render that they aren't working?
I use the Django Crispy Forms library which does a lot of this formatting for me automatically.
If you use Bootstrap, the template pack they describe in the installation guide helps keep the formatting looking good.
It doesn't automatically use tooltips to show the form errors, but it should do a pretty good job of keeping the error messages looking nice on your forms.
To enable horizontal scrollbars in a table I need to style the containing DIV with "overflow: auto", highlighted in blue.
I tried it with FireBug and got the desired result. Just can't figure out out how to put the setting into APEX.
Using the theme "Blue Responsive".
I've played with this a bit in Apex 4.2.2, it should work the same in 4.2.1 I think. That particular div doesn't come from any template but you can target it with some CSS.
In the page properties, for CSS Inline, I entered the following and it seemed to work:
#report_2583625959157728_catch {overflow:auto}
(I think I've transcribed the correct id from your screenshot - you may need to check)
Unfortunately this means you'd have to do this for each report in your application individually where you want the scrollbar to appear.
Note: I haven't tested this in IE, however - last time I was mucking around with scrolling areas I found it incredibly frustrating to get it working in IE without breaking other functionality in the region - especially for Interactive reports.
You can add to Region Header:
<div style="overflow:auto;">
and to Region Footer
</div>
You can also add your css line to a report region template, if you want the scrollbar to be added to each report.
Other wise you're better of putting the overflow on a class and add it to your application's stylesheet, eg:
.myClass {overflow:auto}
you get more flexibilty to style your region this way. You can add the class to your report by setting the region attributes to class="myClass".
Note that instead of "auto", you can also try to use the element option "scroll", check the w3schools docs: http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have a template where I need to embed some CSS from a model within a style tag, like this:
<style>{{m.get_css_text}}</style>
(in case it matters, m is actually a for-in var)
This works without a problem except for one glitch which only happens in IE. I have a rule in the CSS includes a filter rule, which uses quotes, like this -
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#f5f5f5") !important;
The default escaping behavior of django escapes the quotes, and this breaks the CSS rule, which mucks up the CSS in IE, where the rule applies.
Using the |safe filter solves this problem, of course, but I would rather not use it. For now the model holding the CSS is only editable by my staff, but in the future this could be created by our users.
My question is this - what filter(s) should I use to prevent escaping of quotes etc. but to keep the tag safe? My only idea so far is to use the removetags filter, but I'm not sure it's the best idea.
Thanks!
Just use a combo of striptags and safe, i.e.:
<style>{{m.get_css_text|striptags|safe}}</style>
With HTML tags removed, there's nothing "unsafe" about safe (sorry, couldn't help myself).