In my template I'm writing:
<div class="content video">{{ each.text }}</div>
And I'm getting:
<iframe width="300" height="200" src="http://www.youtube.com/embed/1C1HLH-hOZU" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
I want that text to be the part of the mark up,not as text.What say?
Do you mean the output of each.text is escaped and you see the text in your browser rather than the rendered markup?
This is because Django's template engine autoescapes output by default for security reasons. You might want to use the builtin safe filter like this:
<div class="content video">{{ each.text|safe }}</div>
Or another way is to use mark_safe in your view.
Related
According to the documentation of F6 we can use the accordion container with something else than a ul tag. Or, I can't get it to work with an article tag.
The problem seems to be caused by the fact that .accordion-title isn't the direct child of .accordion-item. Unfortunately, in my use case, I need to wrap the a tag with the .accordion-title class inside an heading tag.
Does anyone would know how to solve that issue?
Thanks,
Here's an example of my use case :
<div class="accordion" enter code here
data-multi-expand="true"
data-allow-all-closed="true"
data-accordion>
<article class="accordion-item" data-accordion-item>
<header>
<h3>
Group Name
</h3>
</header>
<div class="accordion-content" data-tab-content>
<p>Hello World</p>
</div>
</article>
</div>
As you figured out, it doesn't have to do with the <article> tag but rather that a direct child click trigger is needed.
Example of it working with <article>
https://codepen.io/rafibomb/pen/pGKZYg
Without JS modification, it may not work the way you want it to.
So I've got some really specific styling constraints for the messages, and I've pushed ::before and ::after as far as they will go. Beyond that what I really need is for the text of the message to be enclosed in a span tag, ideally with a settable class (it's just dumped in the div which is not great to begin with).
Is there any setting in Django, or any place I can go to restructure the html? I can't find any documentation for this (surely this is not an uncommon thing to customise).
The alternative is to use js, but I'd prefer to avoid cutting and pasting elements and content when it should be something that should be customisable.
What I've got is:
<div class="messages">
<div class="alert alert-success alert-dismissable fade show">
x
[message text]
</div>
</div>
What I want is:
<div class="messages">
<div class="alert alert-success alert-dismissable fade show">
<a href="#" class="close" data-dismiss="alert" aria-label="close">
<i class="close-icon"></i>
</a>
<span>[message text]</span>
</div>
</div>
In views.py I'm using SuccessMessageMixin in various places.
So as it was pointed out to me, this was my search fail. The html structure for the messages can usually be found in base.html (it seems like it is a standard place to set it up).
There is some good documentation here: https://django-advanced-training.readthedocs.io/en/latest/features/contrib.messages/
So I'm in a situation that requires parsing raw HTML data as a string, this is unavoidable unfortunately otherwise I wouldn't post this. I only need regex to match the class of a div that has an img tag as a child.
So this is the code example that I'm dealing with:
<div class="summary">
<h3>Example</h3>
<div class="explanation">
<span>This serves as an example for the site.</span>
</div>
<div class="user-details">
mheathershaw<br>
<img src="res/badge522.png"/> <span class="score">522</span>
</div>
<div class="help">
Help
</div>
</div>
And the div that I'd like to retrieve the class from is the div that contains the image. The exact capture from this example that I'd like (optimally) is user-details. The criteria for capturing it is simply if it has <img ... /> as a child.
Anyone able to help? Thanks!
You may try this,
/<div\b[^>]*\bclass="([^"]*)"[^>]*>(?:(?!<\/div>)[\s\S])*?<img\b[^>]*>(?:(?!<\/div>)[\s\S])*?<\/div>/
DEMO
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.
I have a small problem with play-framwork (1.2.4).
I want to have a tag inherit another tag, and this one be included in a html page extending another web page. The best way to explain is with a schema :
However, it did not work the way I want. In fact, the extends in the test.tag file seems to overwrite the one in Screen.html. Then, the content of all the Screen.html is included in the block.tag #{doLayout /} instead of in the one of main.html
Is there any way to do what I want ?
Thanks.
Here is the sources :
main.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
#{doLayout /}
</body>
</html>
Screen.html
#{extends 'main.html' /}
<div id="Screen.html">
#{test /}
</div>
test.tag
#{extends 'tags/block.tag' /}
test.tag
block.tag
<div id="test">
#{doLayout /}
</div>
The generated html when the page is called
<div id="test">
<div id="Screen.html">
test.tag
</div>
</div>
As you can see, the main.html is not included and the the Screen is included in the block. Any ideas ?
For information, the wanted output :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<div id="Screen.html">
<div id="test">
test.tag
</div>
</div>
</body>
</html>
You can try using #{extends /} in your templates but not use them in tags.
To have some more flexibility in building tags on top of another, you could do:
test.tag:
#{block }
test.tag
#{/block}
and block.tag:
<div id="test">
#{doBody /}
</div>
with this you are passing part of the body from a test.tag to a block.tag and inserting it somewhere in block.tag using #{doBody /}
I think this might due to Groovy engine does #{extends} evaluation on runtime, the screen.html call test.tag which in turn extends block.tag, which happens after screen's extends to main.html and at runtime, groovy decide the final extends win.
Probably you want to try the rythm plugin which evaluate extends semantic at parsing time. That says rythm has no issue in your case.