I use the module angular-snap to adding a menu to my app like this:
<snap-content>
<div ui-view='header'></div><br/><br/>
<div ui-view='content'></div>
</snap-content>
<snap-drawer>
Menu
</snap-drawer>
And my ui-view (content):
<div class="content-padded">
<div class="">
<center><h4>Accueil</h4></center>
<!-- ... -->
</div>
</div>
My problem is I want to put a scrollable div inside my snap-content. And, I don't want the snap-content will become scrollable.
I have the following image to help you to understand what is my problem:
The three elements in the picture are in snap-content, but only the blue div have to scrollable.
Thank you in advance for your help and sorry for my bad English.
The solution I found is :
putting the snap-content "scrollable"
putting the divs I want outsdide the scroll "fixed"
putting a "top" and a "margin-top" in order to have the scroll under my others components.
If somebody have another method, it will be with pleasure.
Related
Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).
My codes lookes like this:
<div class="arrow" ng-click="list.push(list.shift())>←</div>
<div class="ribbon">
<div class="ribbonItem" ng-repeat="item in list">
{{ item.Name }}
</div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>→</div>
This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").
Has someone an idea?
Thanks.
Similar question : how to use animation with ng-repeat in angularjs
Go through this link it might help you:
http://www.nganimate.org/angularjs/ng-repeat/move
Please look at this.
When you right click the words "Basic usage"(seen at top of the page, first block), you can see below html:
<md-toolbar class="demo-toolbar md-primary">
<div class="md-toolbar-tools">
<h3 class="ng-binding">Basic Usage</h3>
<!-- ...other html -->
And when you select "md-toolbar" from above code in elements panel, it will show that it has background color of some blue. And it shows style source as
<style>...</style>.
When you click it, will show it like(click and see please). But generally, it either gives filename.css or says index if css is embedded in html file. But this seems different.
So, my question is there anything "angular/material" with it. Whats going on here ?
From Theme/Under The Hood docs
Each registered theme results in 16 <style> tags being generated.
It's their way of translating the $mdThemingProvider config from javascript to css
I followed last example of this blog entry and I'm not being able to scroll my app.
To test this example I used just created some divs (with cards on it), those cards are loaded with dynamic data.
My home.html file looks like:
<ion-view>
<ion-tabs>
<ion-tab>
<ion-content>
<div>
<!-- several divs goes here -->
I can't be able to figure why content is not scrolling. I also tried with solution of this post without any luck.
Hope you can help me! Thanks in advance.
Use this line..
<ion-content scroll="true">
if you hide scrolling then use..
<ion-content scroll="false">
I'm trying to use UI-router and ui-view to inject my content into my page. But I've stumbled across a tricky scenario that I'm not sure how to handle.
My HTML looks like this:
<div class="fixed">
<nav><\nav>
<ul class="list">
<li ng-repeat="item in items"><\li>
<\ul>
<\div>
<div ui-view><\div>
The problem I'm having is that the items in the ng-repeat don't render outside of the ui-view, and I don't want to put my ui-view inside of the .fixed div, as I'd have to close that .fixed div in every view template, and the HTML begins to get real messy at that point.
Are there any better ways to handle this?
Any help is appreciated. Thanks in advance!
I have a problem with ie7 z-index behaviour.
Opening this page with ie7, the dropdown menu (some sections have it, some other doesn't) falls behind the slider.
I tried to solve using z-index and position of the parent element, but couldn't fix the thing.
Do you have any idea how to make the dropdown menu stay in front of the slider?
Thanks.
Try wrapping the nav menu with an additional container, then give to the wrapping div a bigger z-index than the z-index used in the nav menu.
This is a known issue of IE7 reported HERE on 2006.
There's an article that shows the workaround that can be used to solve the problem.
Take a look HERE.
As an example imagine you have a div with id="menu" for your navigation menu, you should do something like this:
<div id="wrapper" style="position:relative; z-index: 1000;">
<div id="menu" style="position:absolute; z-index: 999;"></div>
</div>
I think you can easily adapt it to your website.
Now i don't have a copy of IE7 and i can't reproduce the problem, but you can try and that should fix your problem. If it doesn't i'll try to assist you furtherly.