I'm using several <md-subheader>s on my page, but they are not sticking to the top when the user scrolls down (like in the demo).
Any ideas? Maybe my layout is causing the problem?
<body>
<div>
<md-toolbar>
<div>
<md-sidenav>
<md-content>
<section>
<md-subheader>
...
Here is a codepen.
Based on another question I had, just adding layout="column" layout-fill to the top div works, too.
The sections fit inside md-content. So, when you scroll, you don't scroll inside md-content. In order for the stickiness to work, you should scroll inside of md-content.
I gave a height of 500px to md-content so that you can see the effect.
<md-content layout="column" layout-padding flex style="height: 500px;">
<!-- Report content -->
<section ng-repeat="i in [1,2,3,4,5]">
Here is the working codepen.
Related
Problem with my approach is when the device width shrinks or switch my view to Mobile View, the chips are overflowing past the screen size. I wanted the chips to be aligned responsively with the screen size.
I tried implementing the div with flex but not luck.
Here's the code
<div layout="row">
<div layout="row">
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
</div>
I created a Code Pen to show the working example. Could anyone please review and let me know what I was doing wrong.
You were on the right track with adding flex, but you needed to tell it to wrap as well. On the second row, you can add the following css..
display:flex;
flex-wrap:wrap;
I know nothing about Angular Material, but just looking at the docs, it seems you can add the flex-wrap:wrap by adding layout-wrap to the container element
<div layout="row">
<div layout="row" layout-wrap>
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
I'm in my way to do an app with ionic and angularJS and i'm trying to make my bar-footer not to overlap the few content that there's in the end, so the content has to finish being shown and, then, footer is the last thing there without overlapping something, which property do I have to apply? Because I've tried all about position property and none of them has worked for me, here I leave you an image of what's happening now:
http://s23.postimg.org/b9uhjq0ej/Captura.png
As you can see, my last item of the list is overlapped by my footer.
Thank you all for your answers and help! :)
--EDITED (providing code):
<ion-content>
<ion-list class="pagina">
<a class="item item-thumbnail-left" ng-repeat="poblacio in poblacions" href="#/app/ambFiltreActivitats" ng-click="doGuardarPoblacio(poblacio.title)">
<img style="width:50px; height:auto; margin-left: 60px;" ng-src="{{poblacio.url}}"/>
<br/><br/>
<b>{{poblacio.title}}</b>
</a>
</ion-list>
</ion-content>
<div class="bar bar-footer">
<div class="title"></div>
</div>
And no, I have no CSS property but background-color one, If I apply position: relative the footer does not even show, and with absolute or fixed it remains the same as in the photo of the link.
Add 'has-footer' to <ion-content> can solve this problem.
Simple issue, I've made a really basic page to play around with Angular Material. I have a button which is visible on medium-sized devices which toggles the side navigation, and for some reason it is full width. There is no CSS which is making it full width, and there are no Material directives which are making it full width. It seems to have inherited the width of the container it's in, but I can't see why.
Can anyone with a bit of Angular Material knowledge see why? (Just resize the window pane to see the button)
Here's my CodePen:
http://codepen.io/anon/pen/jPYNzy
And the code:
<!-- Container -->
<div layout="column" layout-fill>
<div layout="row" flex>
<!-- Content -->
<md-content flex>
<md-toolbar>
<div class="md-toolbar-tools">
<h1>Title</h1>
</div>
</md-toolbar>
<div layout="column" class="md-padding">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<md-button ng-click="toggleLeft()" hide-gt-md>
Toggle left
</md-button>
</div>
</md-content><!-- ./Content -->
</div>
</div><!-- ./Container -->
Just wrap it in another div if this is undesired. The flex-direction of <div layout="column"> seems to be responsible for the behavior.
An elements width defaults to 100% of it's container, unless specified otherwise.
I just add the DIV tag to md-button with style property of width 100px
Its Work fine
<div style="text-align:center;">
<md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
Toggle left
</md-button></div>
Semantic-UI forewarns on its sidebar page that "Fixed position content may have issues changing its position when a sidebar appears." It then provides two possible solutions to the problem.
Surprisingly, on that very same page and throughout the site, Semantic-UI's website uses a fixed top menu that adjusts just fine when the left sidebar is triggered.
I want to simply create a fixed top menu like the one Semantic-UI's site uses that adjusts properly when the sidebar is opened. However, this is proving frustratingly difficult, as neither of the two proposed solutions work. I've inspected the markup, css, and javascript but can't figure out how he went from the code Semantic-UI provides to a working fixed top menu that adjusts properly when the sidebar is opened.
Any thoughts or direction? Using Semantic-UI how do you create a fixed top menu that adjusts properly when a sidebar is opened?
From the docs:
Using Fixed Content Any fixed position content that should move with
page content when your sidebar is visible, should receive the class
name fixed and exist as a sibling element to your sidebar.
Fixed content that is not included adjacent to your pusher will lose
its positioning when a sidebar is shown.
<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>
<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
<a class="item">Home </a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
<a class="item menu-trigger">Menu</a>
<a class="item">Page 1</a>
<a class="item">Page 2</a>
</div>
<div class="pusher">
<!-- Page Content Here-->
<div class="ui basic segment">
<h3 class="ui header">Hello there</h3>
</div>
</div>
Don't forget to put the code above inside the "body" tag and including the css & js files.
Use the 'exclusive' setting to display multiple sidebars that play nicely with each other.
$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');
I have a markup arranged as follows in my website:
<body>
<div id="wrapper">
<div id="middle">
<div class="red-container">
<div class="row">
Middle. Row 1.
</div>
</div>
</div>
<div id="right">
<div class="green-container">
<div class="row">
Right. Row 1.
</div>
</div>
</div>
</div>
</body>
The right div as would be obvious has to be towards the right of the middle div.
Here's the fiddle (right div here inside my fiddle somehow is not actually to the right of middle div) : http://jsfiddle.net/NNMYS/
I am trying to achieve a sliding effect here:
All the content from the middle div should slide to the left and get removed after the animation. On the other hand, simultaneously, the content from the right div (which in my case will be added by ajax to the right div) should slide from the right div to the middle div (and removed from the right div). How can that be done?
I could have done a content slider directly by having all the content directly placed separated by positions and sliding to the clicked item. But here since I would be adding content by ajax and also have some responsive implementation, in my case that doesn't seem to possible.
Look at this. I think this might help
http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/