I need to Bind Array Items to UI.
back in Days i used bootstrap and now looking to use Angular Material.
In bootstrap and angular Binding the code as follows
<div class="row">
<div ng-repeat="product in products">
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
how to do the simalar grid binding using Angular Material. I tried below
<div layout="column">
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Resulting all items in rows. But i need the display to be similar to bootstrap view, showing items next to each other and in next rows
You will have to add "layout-wrap" attribute to your row.
<div layout="row" layout-wrap>
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Read more about layout options here
Related
I have created a dynamic HTML label. When is rendered by orbeon runner first it shows correctly but when I add a new item in a repeated grid inside it gets duplicated
The HTML label is like this:
<div class="form-table--head">
<div class="content-left">
<p class="property--title"></p><span class="property--qty">{$itCount} counted</span>
<div class="box-info box-link-popup hidden-xs">
<div class="box__popup" tabindex="-1">
<p>Options:</p>
<ul>
<li>Option 1.</li>
<li>Option 2.</li>
<li>Option 3.</li>
</ul>
</div>
</div>
<p class="property--amount property--amount-xs">{$itSum} €</p>
</div>
<div class="content-right">
<p class="property--amount hidden-xs">{$itSum} €</p>
<div class="header-menu">
<ul>
<li>Do something</li>
<li>Do something</li>
<li>Do something</li>
</ul>
</div>
</div>
</div>
Here is the entire form source code: https://pastebin.com/P3VK4hKm
Here is the behaviour first time:
And here after add a new iteration:
I am using Orbeon 2018.2.3 PE
The behavior you noticed is caused by a bug, which is fixed in Orbeon Forms in 2019.1. For reference, the issue is tracked as #4136.
I am using material design flexbox layout and in a box, I have two boxes. I create on jsfiddle, to clarify what I mean:
Angular Material app
I want to set between these boxes a space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
For those interested in a solution using Angular Flex Layout, you can achieve this with fxLayoutGap directive.
Without fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
With fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
I think what you need is 'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
I think you can do it much simpler:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
You can insert flexible element between HOME and SIGNUP elements and it will fill the space between them.
I am trying trying to create a nested accordion out of twitter-bootstrap panels. But the problem is, both the parent and child accordions are being affected (collapsed/opened) together when I click on either one. Is something wrong with my header selector?
my html:
<div class="panel panel-default">
<div class="panel-heading">Outer Panel</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">Inner Panel</div>
<div class="panel-body"></div>
</div>
</div>
</div>
JS:
$(".panel").accordion({header:'.panel-heading',collapsible:true});
It turns out the header option would need to be >.panel-heading to affect only the current level.
Hi please look at this,
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-15">
<div class="row">
<div class="col-lg-**2/3**"></div>
<div class="col-lg-**1/3**"></div>
</div>
</div>
How Can I do it without separator?
I would like to do something like that:
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-5"></div>
</div>
This is Grid - 20 columns, 5 column sidebar 15 rest.
Bootstrap is based on a 12 column grid. If you want a column to be 2/3's of a page with a sidebar 1/3 I would do the following.
<div class="container>
<div class="row">
<div class="col-sm-8">
<p> This content is 2/3 of the page</p>
</div><!-- col-sm-8 -->
<div class="col-sm-4 -->
<p>This content is 1/3 of the page</p>
</div><!-- col-sm-4 -->
</div><!-- row -->
</div><!-- container -->
If you are wanting it to be responsive I would start with defining the smaller screen size "col-sm-?" and large screens will inherit this.
Otherwise, I'm not sure what you are trying to achieve and what you mean by separator. Could you clarify?
Hope this helps.
I am iterating over multiple addresses, and I want them in rows with 2 columns each. The way to achieve this with Twitter Bootstrap would be something like this:
<div class="row-fluid">
<div class="span6">First Address</div>
<div class="span6">Second Address</div>
</div>
<div class="row-fluid">
<div class="span6">Third Address</div>
<div class="span6">Fourth Address</div>
</div>
I can't seem to get Thymeleaf to do this in a single th:each statement. Is it even possible?
You can break your array into chunks, based on the number of columns you want. So, for two columns, you could do the following:
<div th:each="addressChunks : ${T(com.google.common.collect.Lists).partition(customerAddresses, 2)}" class="row-fluid">
<div th:each="address : ${addressChunks}" th:object="${address}" class="span6">
<address></address>
</div>
</div>