I have pagination working in my app. I display 10 elements per page. Now I would like to format these 10 elements into 2 columns (2x 5 elements per 1 page).
I don't know how to start.
<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize" class="pagination-small" data-previous-text="«" data-next-text="»"></pagination>
Code reference:
http://jsfiddle.net/eqCWL/224/
In your fiddle you are using the older bootstrap2 css, so I'll use it here for the solution:
First, you need to read the bootstrap documentation on scaffolding/grid system
format your HTML to show two lists in two rows:
<div class="row">
<div class="span6">
<li>{{data.name}}</li>
</div>
<div class="span6">
<li>{{data.name}}</li>
</div>
</div>
then, you will need to set the first ng-repeat to show only half of items:
ng-repeat="data in filtered = (list | filter:search) |
startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit/2"
notice limitTo:entryLimit/2
and the second one to show the rest:
ng-repeat="data in filtered = (list | filter:search) |
startFrom:(currentPage-1)*entryLimit + entryLimit/2 | limitTo:entryLimit/2"
you need to change the startFrom filter, to start entryLimit / 2 items later:
startFrom:(currentPage-1)*entryLimit + entryLimit/2
You can test a working example here
Related
How to align to highest column in the next row of a loop? I would like it to look like in the first image, not the second. Divs are rendered in loop:
<div class="container">
<div class="row">
<? foreach($a as $b): ?>
<div class="col-xs-12 col-sm-6 col-md-4"" >
$b->foo
</div>
<? endforeach ?>
</div>
</div>
First image (undesirable):
Second image (desirable solution):
This is a side effect of floating, you will need to clear the float on every x-th element, with different “x” for the sm and md breakpoints.
The nth-child selector helps with that. To not have to select the columns based on any specific col-xy-foo class, I would simply go with the child selector here, .row > :nth-child(…), the row itself made more uniquely selectable by an additional class or id, if necessary.
This question already has an answer here:
Issue with push/pulling my layout
(1 answer)
Closed 6 years ago.
This is my code:
<div class="row">
<div class="col-sm-12 col-lg-3">
A
</div>
<div class="col-sm-12 col-lg-9">
B
</div>
</div>
This is my template on desktop device:
+-------+-------+-------+-------+
| | |
| A | B |
| | |
+-------+-------+-------+-------+
This is my template on mobile device:
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
But I want my template to look like this on mobile device:
+-------+-------+-------+-------+
| |
| B |
| |
+-------+-------+-------+-------+
| |
| A |
| |
+-------+-------+-------+-------+
Is there any way to achieve this without having to change my initial structure?
You can use the col push & pull class to achieve this quite easily. There is a good explanation here which should help.
To spell it out, you need to move B above A, then pull A across 9 cols for large screen (col-lg-pull-9) and push B across 3 cols for larger screens( col-lg-push-3). Therefore, the code will be:
<div class="row">
<div class="col-sm-12 col-lg-9 col-lg-push-3">
B
</div>
<div class="col-sm-12 col-lg-3 col-lg-pull-9">
A
</div>
</div>
OK, reading your comments below, you stated you can't changes the order of the divs. Can you use jQuery? If so, try this:
$(document).ready(function(){
if ($(window).width() < 768){
alert("mobile");
$("#divB").insertBefore("#divA");
}
else {
alert("not mobile");
}
});
http://jsfiddle.net/humotrj0/173/
You can change the order in the HTML (first div B), being this the order for mobile, and change the order in desktop with col-lg-push-* and col-lg-pull-*.
See http://getbootstrap.com/css/#grid-column-ordering
You need to use the col-lg-push and col-lg-pull options
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<div class="row">
<div class="col-lg-9 col-lg-push-3">
B
</div>
<div class=" col-lg-3 col-lg-pull-9">
A
</div>
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right. View it working in Bootsnipp
I'd like to have a two-column layout to display the returned collection information. Right now I have a two-column layout like:
<template name="Participants">
<div class="container">
<h4 style="text-align: center">{{ReportsMonth}} {{ReportsCamp}} {{ReportsYear}} {{ReportsTitle}}</h4>
{{#each programReports}}
<div class="row">
<div class="col s6">
<h5>Name: {{FullName}}</h5>
<p>Age: {{calculateAge Bdate}}<br> Sex: {{Sex}}<br> Level: {{Level}}<br> Location: {{City}}, {{State}}</p>
</div>
<div class="col s6">
<h5>Name: {{FullName}}</h5>
<p>Age: {{calculateAge Bdate}}<br> Sex: {{Sex}}<br> Level: {{Level}}<br> Location: {{City}}, {{State}}</p>
</div>
</div>
{{/each}}
</div>
</template>
The problem of course is that when it iterates through, it repeats the document across to the next column; it only gets to the next document when it finishes row. Is there a way to have it iterate to fill each div in each row with the next document?
Example:
Current HTML Output:
a a
b b
Desired:
a c
b d
Or:
a b
c d
Best way I can think of for the first example (vertical data rows, a c on same row):
Split your programReports into two helpers: one for the first half, one for the second half.
Make a row and a col s6 outside your #each loops.
Put your items in your each loops in a row and xs12.
I'd love it if someone had a better way to do this, as I've had to do it myself.
Horizontal data rows example (a b on same row):
I think for this one you simply need to get rid of the second col s6 in your each loop. I could be misunderstanding something though.
I am trying to create a page that displays the latest images from the child pages of the holder.
Each row will alternate between the example below:
Large Image | Small Image
Small Image | Large Image
Large Image | Small Image
and so on....
template.ss
<div class="row">
<div class="span8">
LARGE IMAGE
</div>
<div class="span4">
SMALL IMAGE
</div>
</div>
<div class="row">
<div class="span4">
Small Image
</div>
<div class="span8">
Large IMage
</div>
</div>
</div>
<div class="row">
<div class="span8">
Large Image
</div>
<div class="span4">
Small Image
</div>
</div>
How can I process that in the template file?
I've tried to write a custom function to process the latest images within the Holder Controller
controller.php
$works = WorkPage::get();
This only returns the image id, I;ve tried a left join but it doesn't return the file path.
$works = WorkPage::get()->leftJoin("File", "\"File\".\"ID\" = \"WorkPage\".\"FeaturedImageID\"");
File::get()->
leftJoin("SiteTree", "\"SiteTree\".\"ParentID\" = ".$this->ID)->
leftJoin("WorkPage", "\"WorkPage\".\"ID\" = \"SiteTree\".\"ID\"")->
where("\"File\".\"ID\" = \"WorkPage\".\"FeaturedImageID\"");
might be the sql query you are after (untested though)
This is how I did, not sure if it's the best way but it works.
$works = WorkPage::get();
foreach ($works as $work) {
//Build the IMage Object so we can add it to the Work Object
$ImageObj = File::get()->byID($work->FeaturedImageID);
$Image->ID = $ImageObj->ID;
$Image->Title = $ImageObj->Title;
$Image->Name = $ImageObj->Name;
$Image->Filename = $ImageObj->Filename;
$work->ImageObj = $Image;
$ImagePath = $work->ImageObj->Filename;
}
Your question isn't 100% clear. I'm not sure if you're having trouble with the template looping and conditionals or with getting the image objects from WorkPage so I'll attempt to answer both.
To create the alternating layout, the easiest way is to use a conditional based on whether the loop count is odd or even. A quick untested example:
<% loop $Works %>
<div class="row">
<% if $Odd %>
<div class="span8">LARGE IMAGE</div>
<div class="span4">SMALL IMAGE</div>
<% else %>
<div class="span4">SMALL IMAGE</div>
<div class="span8">LARGE IMAGE</div>
<% end_if %>
</div>
<% end_loop %>
Documentation reference is at http://docs.silverstripe.org/framework/en/reference/templates#position-indicators
To get different sized images within the loop you can simply use $FeaturedImage->CroppedImage(xxx,xxx). This assumes you have on 'Work' per row and each work has two images, but as I said the question isn't that clear so if my assumptions are incorrect you will need to provide more info about your model and what you're trying to achieve.
Just to comment on your join you tested:
this wont work:
$works = WorkPage::get()->leftJoin("File", "\"File\".\"ID\" = \"WorkPage\".\"FeaturedImageID\"");
That join doesn't get the data of the joined table; in essence you are requestion workpage objects which dont have that as the data. If you had done the join the otherway around you would be able to get the info you were after
Anyways as Columba allready mentioned you can get the relations correctly on by calling the field as "a function" has one and has many, example $this->hasmanyrelation() < returns the datalist (was that coorect term for ss3 :) ). When using $hasmanyrelation relation on the tempate it just magically gets the collection.
Also you should use the Link() to get the path tho the file in my oppinnion as that works for sitetree objects as well.
I am using a 960 Grid System, I am trying to achieve something like the following --
|-----| |-------------------|
| | | |--| |-----| |
| | | | | | | |
| | | |--| |-----| |
| | | |
| | | |------| |--| |
| | | | | | | |
| | | |------| |--| |
|-----| |-------------------|
Is there a way of doing so? The only reason I need the second set of divs in my right column is because the left column is quite long and I dont want the space between the 2nd set of columns.
I would really appreciate any guidance if there is a better way of achieving this.
This capability is built into the Grid 960 system. You just give the left and right nested grid items the classes "alpha" and "omega", respectively.
Here's an example:
<div class="container_12">
<div class="grid_3">
</div>
<div class="grid_9">
<div class="grid_4 alpha">
</div>
<div class="grid_5 omega">
</div>
<div class="grid_5 alpha">
</div>
<div class="grid_4 omega">
</div>
</div>
</div><!-- end .container_12 -->
In case you're willing to consider other frameworks, here's how you achieve the desired result with Cascade Framework :
<div class="site-center"> <!-- Center all content in a responsive container -->
<div class="col width-1of4"> <!-- Your left column goes here -->
</div>
<div class="col width-fill"> <!-- Your main content goes here -->
<div class="col"> <!-- First row -->
<div class="col width-1of3"> <!-- First element of first row -->
</div>
<div class="col width-fill"> <!-- Second element of first row -->
</div>
</div>
<div class="col"> <!-- Second row -->
<div class="col width-2of3"> <!-- First element of second row -->
</div>
<div class="col width-fill"> <!-- Second element of second row -->
</div>
</div>
</div>
</div>
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.