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>
Related
i have this code in tailwind
#foreach($studenti as $student)
<a data-modal-toggle="defaultModal" data-target="#myModal{{$student->id }} href="#" class="hover:text-blue-700">{{$student->name}}</a>
and this is the Main modal
<!-- Main modal -->
<div id="myModal{{$student->id}}" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{$alum->nombre}} {{$alum->apellpatern}} {{$alum->apellmatern}}
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
#endforeach
But when i pressed the link it does not work, i am using data-target="#myModal{{$student->id }} in order to pass #student data to tailwind Main modal id="myModal{{$student->id}}",
it seems that this is not the proper way to pass data, i am using Laravel 8, anyhelp is appreciated
Thank you in advance
Omar
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
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.
I'm trying to scroll down to delegate-handle="start" with ionic on load. When i try to run it, i get this message in console.
Delegate for handle "small" could not find a corresponding element with delegate-handle="small"! scrollTop() was not called!
Possible cause: If you are calling scrollTop() immediately, and your element with delegate-handle="small" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollTop() and try again.
My code looks like this, can somebody maybe see what is wrong?
$timeout(function() {
$ionicScrollDelegate.$getByHandle('start').scrollTop();
}, 10);
If i use $ionicScrollDelegate.scrollBottom(), it will scroll to the bottom, so it must be a problem with the specific function.
The html code
<ion-view title="Kalender">
<ion-content>
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div delegate-handle="start"></div>
</ion-content>
</ion-view>
Thanks.
Ionic 1.0.0-beta14 has some strange issue with getByHandle() so you can do it this way:
$timeout(function() {
var startHandle = _.find($ionicScrollDelegate._instances, function (s) {
return s.$$delegateHandle === "start";
});
startHandle.scrollTop();
});
Solution source at forum.ionicframework.com
I think there is a misunderstanding about what the delegate handle does here. Delegate handle is a way to name scroll/content containers. Think of it like a way to give your <ion-content> container a unique name that can be later used with the service. It is possible to have multiple <ion-content> containers on a single view, and this is why the naming is necessary. If you only have one scroll area or don't specify the handle, then it just uses the first view it finds.
You want to scroll to a particular place in the application, which is the job of $ionicScrollDelegate.anchorScroll('element-id');. Take a look at your code here with some modifications. I've put the delegate handle in the correct place, and then use the anchorScroll method to automatically scroll to that ID in the page.
Markup
<ion-view title="Kalender">
<ion-content delegate-handle="kalendar">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div id="start"></div>
</ion-content>
</ion-view>
Controller
$timeout(function() {
$ionicScrollDelegate.$getByHandle('kalendar').anchorScroll('start');
}, 10);
Specify the dalegate-handler in ion-content
<ion-view title="Kalender">
<ion-content delegate-handle="start">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
</ion-content>
</ion-view>
Scroll top can be achieved by forgetting the scroll position which can be achieved by using
$scope.$on("$destroy", function() {
var delegate = $ionicScrollDelegate.$getByHandle('start');
delegate. forgetScrollPosition();
});
Use
$ionicScrollDelegate.$getByHandle('start').scrollTop(); //To scroll to Top.
As I noticed delegate-handle won't work if used with overflow-scroll.
I managed to do it this way:
$scope.scrollHandle = some-handle-value-that-you-want-to-use;
$scope.$on('$ionicView.loaded', function () {
$timeout(function () {
scrollView = $ionicScrollDelegate._instances.filter(function (s) {
if (!s.$$delegateHandle) return false;
return $parse(s.$$delegateHandle.slice(2, -2))
(angular.element(s.element).scope()) == $scope.scrollHandle;
})[0];
}).then(function () {
scrollView.scrollTo(0, 0, false);
});
});
In the template:
delegate-handle="{{scrollHandle}}"
EDIT:
This doesn't work anymore, check this answer for new solution: https://stackoverflow.com/a/32123613/1630623
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 ..