I would like to add a number of avatars spaced equally and horizontally with the "Add" icon at the end. How can I achieve this in Zurb Foundation 5.5? I'm also using AngularJS.
Apologies I'm still quite new to the framework. Would I use a grid?
You can use the block grid:
http://foundation.zurb.com/docs/components/block_grid.html
You simply loop through the images and right after the loop you can render a final <li>ADD Button</li>
Or... you can use Clearing
http://foundation.zurb.com/docs/components/clearing.html
Again looping through the images and right after the loop render the final <li>ADD Button</li>
Related
I’m trying to make a visualisation like this:
I used the built in card and card-columns of bootstrap. But when I expand a panel, all of my <div>s are moving randomly:
I would like the other expansion panels to not move when I open one. Here is an example: StackBlitz.
I've been testing your stackblitz code and the "problem" is at the line 8:
<div class="card-columns">
Exactly at the class name, 'card-columns' is a predefined class that maybe is in BootStrap predefined classes.
My suggestion is to remove this class and use another alternative, like a flex-layout.
Or use html columns.
I've forked your stackblitz code and solved using html columns:
https://stackblitz.com/edit/angular-material-bootstrap-css-qmrzcm
Next step is to add your custom paddings between each columns.
I want to add a logo to the top right corner of my morea generated pages.
I am not sure which file I need to modify or how, can you please advise?
Morea is based upon Bootstrap 3.3, so you'll need to use those CSS classes to provide a right-justified logo.
To insert a logo, you need to modify the code for the items in the navbar, which is located in the core.html file. Here is the code for the default navbar:
https://github.com/morea-framework/core/blob/master/src/_layouts/core.html#L69-L89
What you'll need to do is create a new itemized list right after the current list that creates a right justified navbar item. For example, I inserted this code starting on line 90 of that file in one of my local Morea sites:
<ul class="nav navbar-nav navbar-right">
<li>LOGO</li>
</ul>
And when I re-run morea-run-local.sh, the navbar looks like this:
Obviously, the formatting needs help, but you can investigate the Bootstrap 3.3 docs to figure out the best way to display your logo. Good luck!
I'm using Ionic and flexbox for the first time and I'm strugling to organize my layout.
I'm trying to do a vertical menu where the user can select one topic. Each topic has his own subtopics. If one topic is selected a new row should appear with the related subtopics. The topics should be listed side by side.
The problem is...
I'm using a row and col-50 to draw the topics side by side, and adding another row inside each col-50 with a col-100. The subtopics row becomes restricted by the parent col-50, not using the 100% width.
What is the easiest way to solve this problem?
i find it this, maybe you looking for ionic menu using flexbox
It is complete, i apply this for my project ionic menu with flexbox
This my menu
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
});
I need to create a GWT application that handle the buying of films. So I have to show in a grid (not in a list, I don't like the view) these cell containing image and info about the film like this:( http://static.ipaditalia.com/wp-content/uploads/2012/11/mzl.sckskoqz.480x480-75.jpg ). I think that I need of a grid showing I think, to obtain something like but I wouldn't know to start. thanks for help!
You can use a simple FlowPanel as a container, and add each image with a float set to "left".
Alternatively, you can use a flex-box model with flex-flow: row wrap on a container.
You don't need any widgets for this. This is simple CSS, and it will give you the best performance and the smallest code size.
I'm working on doing my layout using HTMLPanel in uiBinder.
I want to create some whitespace, lets say 70px of height, in several places on the page, to split up the vertical layout of the widgets.
What is the preferred way to do this? Using CSS or a panel that isn't visible or some other method?
Use CSS. You can write it right at the top of your ui.xml file.
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Hello_Stylish_World