On a page, using ng-repeat, I try to place buttons on a grid layout.
Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]
I would like to put say 4 buttons per row.
As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows,
where each row will have 4 buttons.
1) on Controller :
- I have an array with button names
$scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
2) on the page:
- using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code
<body ng-controller="PopupCtrl">
<div class="row responsive-sm">
<div ng-repeat="btnName in btnNames">
<button id={{$index}} class="button button-dark col" >{{btnName}}</button>
</div>
</div>
Please help me defining class="row" and class="col" and such a way that,
during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.
Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.
Use flex-wrap
You can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-25" ng-repeat="btnName in btnNames">
<button class="button button-dark" >{{btnName}}</button>
</div>
</div>
http://codepen.io/Jossef/pen/doeJJP
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
I have taken the above solution and implemented it for Ionic : http://codepen.io/arvindr21/pen/EaVLRN
<div ng-repeat="btnName in btnNames">
<div ng-if="$index%4==0" class="row">
<div class="col">
<button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
<button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
<button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
<button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
</div>
</div>
</div>
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
Thanks.
Ok, So if you want to stack images like me in rows, See how the ng-repeat holds col-50.
<div class="row gallery">
<div class="col col-50" ng-repeat="photo in photos">
<img id="fitWidth" ng-src="{{photo.url}}"/>
</div>
</div>
Then with your css.
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Tested on IOS, Hope that helps :)
I would just like to add to the #Jossef Harush's answer (which, btw, worked).
However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).
The solution was to add this as a style:
style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"
because, as you can see here Safari needs a -webkit prefix.
Hope this helps someone who will choose this solution over #Arvind's.
Worked for me as soon as I added flex-wrap: wrap in the styling.
Since i have set col-50 I started getting rows with two columns as intended.
Example:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-50" ng-repeat="picture in pictures">
{{picture.src}}
</div>
</div>
There's a limitTo starting $index in AngularJS,
Maybe that can simplify things
<div class="row" ng-repeat="element in elements" ng-if="$index % 4==0">
<div class="element" ng-repeat="element in elements|limitTo:4:$index">...</div>
</div>
That will make sure that {{ index + 1 }} fall on a non-existent cell ..
Related
I am using Hestia Wordpress Theme, and I am trying to add a class "out-of-stock" to product cards that meet that condition. I have tried some functions, but without success.
The product card looks like this:
<div class="card card-product pop-and-glow">
<div class="card-image">
... content of card-image ...
</div>
<div class="content">
... here comes content ...
</div>
</div>
I would like to have something like this when the product is out-of-stock:
<div class="card card-product pop-and-glow out-of-stock">
<div class="card-image">
... content of card-image ...
</div>
<div class="content">
... here comes content ...
</div>
</div>
Any hint would be appreciated.
Thanks a lot
R-)
I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.
is there any workaround?
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdown-item-button>
</b-dropdown>
<style scoped>
.btn-clean {
color: #337ab7;
}
</style>
Generated code:
<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064="">
<button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
<div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
<button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
</button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
</button>
</div>
</div>
without "data-v-25a41064" on the button id="ddown2__BV_toggle_"
I came across the same issue today. It helped for me if I put the styling a component higher.
Vue-loader only applies scoped styles to the root element of child components.
You need to use the /deep/ CSS selector to target inside child components.
See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
ngFor don't seem to work for me with ngfor when the flex direction is "row", I mean it works but it puts the items on top of each other instead of side by side
<FlexboxLayout class="itemWindow" *ngFor="let imageUrl of matchItems"
flexDirection="row">
<StackLayout class="inventoryImage">
<Image width= "80" height="80" stretch="aspectFill"
left="5" src="{{imageUrl}}" ></Image>
</StackLayout>
</FlexboxLayout >
What am I doing wrong ? is there another way to do it? I tried with DockLayout but same thing is happening.
I don't have your components so I used divs, but the idea is pretty much the same.
<div fxLayout="row"> <!-- extra container with row layout -->
<div class="itemWindow" *ngFor="let imageUrl of matchItems">
<div class="inventoryImage">
<div width= "80" height="80" stretch="aspectFill"
left="5">{{imageUrl}}</div>
</div>
</div>
</div>
I just added div tag before listItem and added *ngFor to it instead of FlexboxLayout. And it works
<FlexboxLayout flexDirection="row">
<div *ngFor="let filterItem of activityFilters">
<Label flexGrow="1" class="text-center" [text]="activityFilter[filterItem]"> </Label>
</div>
</FlexboxLayout>
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.
<div id="container">
<div class="active">
<div class="active"></div>
</div>
<div>
</div>
</div>
How to write such a container?
Use .index() without parameters to get it's (0-based) index amongst siblings, like this:
var index = $("#container .active").index();
You can test it out here. For your example markup, it would be 0.