I have several values I'm rendering as <li> elements on my template and I want to further this by having them arranged into equal (or near-equal columns) automatically in the template. How can I achieve this?
So far I'm rendering all the values as
<ul>
{% for feature in features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
What about styling each li with style="float:left; width: {% width %}px;"
All you have to do is calculate the width parameter... eg width = 1000/features.length;
In newer browsers you can achieve this behaviour using CSS:
ul {
-moz-column-count: 2; -moz-column-gap: 12px;
-webkit-column-count: 2; -webkit-column-gap: 12px;
column-count: 2; column-gap: 12px;
}
Unfortunately, IE doesn't play along (as of today). To work around this, I wanted to achieve the same effect using javascript. At first, I tried Columnizer, but that inserts divs into those innocent ul elements, which I didn't like.
So I went to build our own little plugin to do exactly what we need: ColumnizeLists, part of our jQuery extensions library.
Include the following script tag into your page:
<script src="https://github.com/teamaton/jquery-xt/blob/master/columnize-lists/tn.columnizelists.jquery.js"></script>
(or a local copy) and simply call
$('ul').columnizeLists({ useHeights: true })
and you're done :-)
Hope this helps.
Related
I am writing a Django app that displays properties of certain objects that have latitute and longitude associated with them. When someone clicks on an object name, I'd like to be able to show them the map of where the objects is. I tried including leaflet.js's map directly into my object detailed view's template like this:
{% extends "base_generic.html" %}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
{% block content %}
<div id="mapid" style="width: 10px; height: 10px;"></div>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: '<my-token-here>'
}).addTo(mymap);
</script>
{% endblock %}
But this gives me the weirdest looking map - it's split into several pieces and I seem to be able to move it freely around the web page into random spots (see below and scroll all the way down, you'll see the break in the middle). Can anyone tell why?
I am using the Zurb Foundation framework and am trying to center text.
If I just use the .text-center class:
<h1 class="text-center">My Heading</h1> The text is center.
However, when I place it inside a column, the text is moved slightly to the right:
<div class="row">
<div class="small-2 small-centered columns text-center">
<h1>My Heading</h1>
</div>
</div>
I want to ask what is the correct way of centering the text inside columns?
its should work fine with your code , but if you can provide screenshot to see what do u mean by its move to the right will be nice.
anyway check this solution may work , and the issue could be from additional custom css added if u have one .
CSS :
.row h1 { margin: 0 auto; padding : 0px }
Try this Fiddle
The problem was that the word inside the heading is too long for my mobile device so I added the style property:
word-wrap: break-word;
Not sure if this is the correct way to handle such cases but it is a possible solution.
I'm trying to change the default color for my title, which is white at the moment.
<nav class = "top-bar" data-topbar>
<ul class = "title-area">
<li class = "name">
<h1><%= link_to "CF logo", root_path, class: "home"%></h1>
</li>
</ul>
</nav>
I tried calling
.name h1{
color:red;
}
and
.title-area .name h1{
color:red;
}
even
.home{
font-size: 1.5em;
font-color: red;
}
but none of them works. What can I do?
If your title is inside of an anchor tag <a> - you'll want something like this:
.top-bar .name a { color: #9dcf81; }
Inside Chrome, after you inspect your element, look for the plus symbol once you highlight your title with a mouse click. Consider using the !important attribute if the color doesn't stick.
p.s. - Please provide a link with a URL Shortening service (if your concerned about privacy) to your site.
Whether or not a CSS rule is used is dependent on the selectors specificity. See the MDN for details on how specificity for a CSS selector is calculated.
If you want to see which CSS statement is overriding your one (presumably one of the styles specified in the Foundation CSS library that you are using), then I would recommend a tool like firebug or chrome developer tools which allow you to inspect an element and see which rules are being taken into account and which are being overridden by more specific selectors.
You can also use important! inside a selector to override the specificity, however use this with caution. So for example:-
.name h1 {
color:red !important;
}
Foundation 5 provides grid system and I would like to use it to arrange my web page. But the problem is I dont know how to set the height of each column. now it's just as large as the content needs, but it's really ugly.
I've tried the solution Set height with zurb-foundation grid, but it doesnot work. It is a nested grid of 8 columns which is splited into two 6-columns. I just want these two 6-columns to be the same tall but a different background color.
My code is :
<div class="row">
<div class="small-8 columns"> 8
<div class="row" >
<div class="small-6 columns" id="d8">
more and more people want to learn some HTML and CSS.
</div>
<div class="small-6 columns" id="d9">
more and more people want to learn some HTML and CSS. Joining the
designers and programmers are new audiences who need to know
a little bit of code at work (update a content management system
or e-commerce store) and those who want to make their personal
blogs more attractive. Many books teaching HTML and CSS are dry
and only written for those who want to become programmers, which
is why this book takes an entirely new approach. </div>
</div>
</div>
</div>
</div>
and the JS from the link is:
<script>
$(window).load(function()({
//equalize function
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
//call the equalize height function
equalHeight($("div.small-6"));
});
</script>
In fact it is easy to set the height. Finally I use
.div[id]
{
height:85px !important;
}
and it works.
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.