I am a recent college grad trying to build a bigger portfolio so I am building a fake e-commerce site. I want to build a html table that takes in data from SQLFORM query.
For example, if I have 8 entries / and i want 3 columns - it displays as so.
X X X
X X X
X X
And if i have only 4 entries / and i want 3 columns - it displays as so..
X X X
X
I am having trouble figuring this out... I could not find any resources on web2py online that demonstrate this. Here is my current code to display 1 column... and 1 record per row. In my code the =thenumber is the number of records that are generated by the query.
{{extend 'layout.html'}}
<h1>Disc Golf Post</h1>
</hr>
{{=thenumber}}
{{ for x in rows: }}
<div class='row'>
<img class='col col-lg-4 col-md-6 col-sm-6 col-xs-12' src='http://127.0.0.1:8000/pluralsight/static{{=x.products_image}}' alt='blog image' />
<div class='col col-lg-8 col-md-6 col-sm-6 col-xs-12'>
<p class='lead'>
<b>{{=x.products_title}}</b>
</p>
<p>
<b>Category: </b>{{=x.products_manufacturer}}
</p>
<p>
{{=x.products_price}}
</p>
<p>
{{=x.products_capacity}}
</p>
</div>
</div>
{{pass}}
I am aware I need to do some formatting issues on size of columns and such. Any advice would be greatly appreciated or a link to a site that details this in web2py would also be fantastic. Thanks in advance.
Related
I am learning angular n making a project. display table
I have this above page in which I want to separate the records by type. however I am not able to get the condition right. Can someone help me. Below is my code.
<div class="row">
<div class="col">
<h3>Escalations</h3>
</div>
</div>
<div ng-if="notes.values === 'Escalations' ">
<app-list-view
[data]="notes.values"
[cols]="notes.cols"
[routeInfo]="notes.routeInfo"
[sortBy]="'isActive'">
</app-list-view>
</div>
I have below an HTML code which utilizes ng-repeat to show data. The data is separated to two columns, and each column will have more or less the same number of data (shown through links).
However, to do this, I traversed through the same set of data twice, with two different ng-repeat conditions (with the first traversal showing the first set of data in the first column, and the second traversal showing the second set of data in the second column).
I believe this is really redundant (and time consuming, too), because for the first traversal, I get the first half of the data then skip the rest (by ng-if), and for the second traversal, I get the second half.
Is there a way to traverse through the data just once, but still being able to show the division of data?
Note: I've tried putting ng-repeat before the first < div class="column" >, and keep the conditionals inside < a >, but what happens is that even the < div class="column" > repeats, which shouldn't be the case. I just want the < a > tags to repeat in their corresponding columns.
Code
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index <= (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index > (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
My improvement is to use 'limitTo' pipe, instead of ng-if.
Look at this version, it's more efficient.
{{agFull = agencies.length; ""}}
{{agHalf = agFull/2; ""}}
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agFull : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
I would also recommend to store agencies.length & agencies.length/2 in a variable, as I did above. You can also use the controller for that, if you don't like template variables.
Since you are looking to optimize, i suggest that you split your array in to two in the controller. This will remove the redundancy. Don't let your view to the the controller's work.
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies[0]" >
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies[1]">
{{agency.name}}<br>
</div>
</h5>
</div>
I am new to HTML and was asked to figure out how to work in a Drupal 7 website.
Although I know some basic HTML, I am trying to create a basic page with three columns that are aligned.
I used this HTML code found on google, but the columns aren't lined up evenly.
<div class="row">
<div class="col-md-4">
<h3>
ANGLED STYLE (TYPE 29)</h3>
Maximum aggression for fast stock removal. Used on both flat surface and edge work. The angle provides greater surface contact for stock removal on flat surfaces.</div>
<div class="col-md-4">
<h3>
</h3>
<h3>
FLAT STYLE (TYPE 27)</h3>
<p>Smooth grinding, blending and finishing. Used primarily on flat surfaces and slight contours.</p>
</div>
<div class="col-md-4">
<h3>
</h3>
<h3>
MORE TEXT</h3>
<p>Some more text here.</p>
</div>
</div>
When I try to google a fix, I keep seeing answers for grids or tables.
Can anyone help me out or point me in the right direction?
Screen shot of the rows
I'm using angular to load in a list of items from the server and displaying them on the page using:
<div class="col-sm-6 col-md-4" ng-repeat="activity in activities">
<img ng-src="[[ act.icon ]]" height="100" alt="">
<h3>[[ act.title ]]</h3>
<a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
<p>[[ act.description ]]<br>
Duration: [[ activity.num_times ]] time<br>
Points: [[ activity.points ]]<br>
</p>
</div>
As you can see, a small display should show each row with 2 activities, and medium and up 3 wide. The problem I'm having is that not all rows display the wanted number of activities. What I mean by that can be seen in the image below.
It has to do with the fact that some activities have more text than others, therefore their heights are taller. The row below will insert the next activity in the highest possible spot, often messing up the formatting.
I feel like there is some simple css fix, but I just can't seem to figure it out. The goal is the below image. Any help would be appreciated.
You'd need to clear the rows and reset and apply these clears again at the different breakpoints.
clearing-bootstrap-3-columns
In your case all you need to do - is to clear row after every 2nd item on md screens and after every 3rd item on sm screens.
Like this:
<div ng-repeat="activity in activities">
<!-- your item -->
<div class="col-sm-6 col-md-4">
<img ng-src="[[ act.icon ]]" height="100" alt="">
<h3>[[ act.title ]]</h3>
<a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
<p>[[ act.description ]]<br>
Duration: [[ activity.num_times ]] time<br>
Points: [[ activity.points ]]<br>
</p>
</div>
<!-- clear row after every 3rd item on MD screens -->
<div class="clearfix visible-md" ng-if="($index+1) % 3 === 0"></div>
<!-- clear row after every 2nd item on SM screens -->
<div class="clearfix visible-sm" ng-if="($index+1) % 2 === 0"></div>
</div>
Here is plunker for demo
I have some segments that are similar on my page, same setup - one icon-logo and one text-area:
<div class="row-fluid">
<div class="span7">
<img src="img/icon2.png" alt="" />
</div>
<div class="span4">
<h6>My Text Area</h6>
<p>Description of that functionality<br>
Multi lines of text<p>
</div>
</div>
Just basically an icon and a description text, started out with having 2 of these which is alright, now there is 8 and i think i would like to gather it in one segment, but then slide between the 8 icons/descriptions.
So my question is, any chance or any component available where i can put in 8 of these in a slider-effect way ? most sliders I've looked at is image sliders, but since i need to have multi-language i don't want to convert the 2 spans into 1 image.
I am not an expert in web development so an example would really be appreciated if its possible.
You can use bootstrap carousel for this.
This is the markup they expect
<div class="carousel-inner">
<div class="active item">[here]</div>
<div class="item">[here]</div>
<div class="item">[here]</div>
</div>
All you need to do is to have your two spans inside the element with class item.
Check this fiddle. Hope this is what you wanted.