THE SITUATION:
I need to use the text-wrap for an ion-card but it seems it doesn't work.
THE CODE:
<ion-card>
<ion-card-header text-wrap>
<h2> <ion-icon name="list-box"></ion-icon> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor</h2>
</ion-card-header>
<ion-card-content>
<p>content</p>
</ion-card-content>
</ion-card>
THE PLUNKER:
http://plnkr.co/edit/z5ehOQgz0oArhg6mMtUj?p=preview
THE QUESTION:
There is a way to use text-wrap for the ion-card?
<ion-card-header text-wrap>
you can use text-wrap in other components too.
Ok, setting white-space: normal; to the ion-card-header fixed this.
<ion-card-header style="white-space: normal;"> could be placed in css file as well.
Plunker: http://plnkr.co/edit/GjDmJBNMdnoPiteAKpDB
white-space: normal; is correct. But it should be placed on the header tag IE h2. By default "ion-labels" (a class that can be injected into the DOM) have white-space: nowrap; applied to them. So setting white-space: normal; on the header tag selecting the ion-label tag through css will work.
Related
I am trying to get all of the slides in my orbit slider to be the height of the largest slide.
Here is my markup:
$(document).ready(function(){
$('.orbit-container').equalize('outerHeight');
});
<div class="orbit" data-orbit="" role="region" data-auto-play="false" data-resize="7sdsk0-orbit" id="7sdsk0-orbit" data-t="3k1v70-t"><button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀︎</button><button class="orbit-next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶︎</button><div class="orbit-wrapper">
<ul class="orbit-container" data-options="bullets: true; autoPlay:false;" data-auto-play="false" data-equalizer="" data-equalize-on-stack="true" data-equalize-by-row="true" data-resize="lo2q16-eq" data-mutate="k2tsn5-eq" data-t="fgxh6n-t" tabindex="0" style="height: 0px;" data-events="mutate">
<li data-equalizer-watch class="orbit-slide" data-slide="0">
<div>
<div class="text-container">
<h1>Arthritis. Give Before it takes.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Homepage%20Billboards/mobile-cropped.jpg?ext=.jpg">
</div>
</li>
<li data-equalizer-watch class="orbit-slide is-active" data-slide="1" aria-live="polite">
<div>
<div class="text-container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Test%20Images/rough-mobile.jpg?ext=.jpg">
</div>
</li>
</ul>
</div>
On each li, an inline style is being applied of height="auto", so the slides are different heights. Even if I call that function after the window has loaded, it has the same effect.
Am I missing something?
I am building a blog with flask-flatpages. In the header of a markdown blogpost, I list the related blogpostings by filename. These should show up as excerpts below the actual blogposting.
Here is what blogpost-1.md should look like:
title: "Blogpost one"
published: 2014-02-13
related:
- blogpost-2.md
- blogpost-4.md
description: "This is the excerpt of blogpost one."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel leo turpis. Cras vulputate mattis dignissim. Aliquam eget
purus purus.
And the result I want:
BLOGPOST ONE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel
leo turpis. Cras vulputate mattis dignissim. Aliquam eget purus purus.
related posts:
BLOGPOST TWO
Summary here
BLOGPOST THREE
Also a summary
The essential part is to follow the path of the related blogpostings and render their title and excepts. Naively something like:
{% for item in blog.meta.related %}
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.decription</p>
</div>
{% endfor %}
This is obviously not going to work, because meta.related is simply a list of strings. It is also not difficult to make a view function that takes these strings and returns a httpResponse:
# app.py
#app.route('/excerpt/<path:path>.html')
def excerpt(path):
blog = blogs.get_or_404(path)
return render_template('excerpt.html', blog=blog)
# excerpt.html
<div>
<h4>{{ blog.meta.title }}</h4>
<p>{{ blog.meta.description }}</p>
</div>
My question: how do I make this happen within the same template?
Should I somehow try to pass the data from the related blogpostings into the context: a list of dicts maybe? Should I use a context processor to achieve this?
Hei Roy, thanks for you research but for the moment i cannot comment so i have to find a way to clarify this.
In order to make this working, in the markdown file you wrote:
title: "Blogpost one"
published: 2014-02-13
related:
- blogpost-2.md
- blogpost-4.md
description: "This is the excerpt of blogpost one."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel leo turpis. Cras vulputate mattis dignissim. Aliquam eget
purus purus.
Need to be change blogpost-2.md and blogpost-4.md without the .md extension.
Without these changes when you loop on the view file:
for path in blog.meta['related']:
related_list.append(blogs.get_or_404(path))
blogpost-1/2.md will not be added to your list because Flask-FlatPages will not understand .md extension and 404 error comes up.
In my case
#app.route('/blog/<path:path>.html')
is changed without .html like :
#site.route('/bloging/<path:path>/')
And to simplify some coding, in template
{{ related.meta.title }}
is equivalent to
{{ related.title }}
and you could add the link to your related article with:
{{ related.title }}
where site is my blueprint.
I arrived at a pretty straightforward answer, but keeping the question open to see if there is a more elegant solution.
In the view function, I iterate the paths of the related blog postings and add the blog objects to a list, which gets passed to the template.
Like this:
#app.route('/blog/<path:path>.html')
def blog_detail(path):
blog = blogs.get_or_404(path)
related_list = []
for path in blog.meta['related']:
related_list.append(blogs.get_or_404(path))
return render_template('blog-detail.html', blog=blog, related_list=related_list)
And in the template:
{% for related in related_list %}
hoi
<div>
<h4>{{ related.meta.title }}</h4>
<p>{{ related.meta.description }}</p>
</div>
{% endfor %}
I have html content which look like this:
html code ... </div>content1</div> html code ...
html code ... </div>content2</div> html code ...
and I would like to extract the content1/2/3... from the HTML as content1 new line content2 new line content3 any idea ? Thanks in advance.
Here's an example using Mojo::DOM, inspired by this StackOverflow answer:
#!/usr/bin/env perl
use strict ;
use warnings ;
use Mojo::DOM ;
my $html = <<EOHTML;
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML with 2 divs</title>
</head>
<body>
<div>
Four score and seven years ago our fathers brought forth on this
continent a new nation, conceived in liberty, and dedicated to the
proposition that all men are created equal.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
EOHTML
my $dom = Mojo::DOM->new ;
$dom->parse( $html ) ;
for my $div ( $dom->find( 'div' )->each ) {
print $div->all_text . "\n" ;
}
The output is:
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
I have string:
<p>Lorem ipsum dolor sit amet. <object width="500" height="500" type="application/x-shockwave-flash"
data="http://www.abc.com/m/l5J16d65wOpT" style="display: block; margin-left: auto; margin-right: auto;">
<param value="always" name="allowscriptaccess">
</object> Lorem ipsum dolor sit amet</p> Lorem ipsum dolor sit amet
Now, i want to add <div class="player"></div> around object tag, it's will become:
<p>Lorem ipsum dolor sit amet. <div class="player"><object width="500" height="500" type="application/x-shockwave-flash"
data="http://www.abc.com/m/l5J16d65wOpT" style="display: block; margin-left: auto; margin-right: auto;">
<param value="always" name="allowscriptaccess">
</object></div> Lorem ipsum dolor sit amet</p> Lorem ipsum dolor sit amet
a preg_replace might be useful here :)
$result = preg_replace('|(<object.*</object>)|sui', '<div class="player">$1</div>', $html);
If you want to replace it like this, then just use the normal str_replace
//PHP
$myString = str_replace("<object>", "<div class=\"player\"><object>", $originalString);
$myString = str_replace("</object>", "</object></div>", $originalString);
How do I short an text in django? For example:
I have this text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
And I want to get:
Lorem ipsum dolor sit amet, consectetur adipisicing elit(more)
Where "(more)" is a link to show the entire text.
Can someone help me? Thank you very much in advance!
Have you tried the template tag truncatechars?
{{ value|truncatechars:[number to truncate chars after] }}
Check out how you'd handle the (more) part here:
If you actually wanted a link to persist and not just hover, you would probably want to use javascript to manipulate your DOM.
Make sure 15 (this is arbitrary) is greater than the number you're slicing by:
{% if value|length > 15 %}
{{ value|slice:"-6" }}(more)
{% else %}
{{ value }}
{% endif %}