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>
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 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.
Though I have tried using clear fix but that didn't solved the purpose
code looks like
<div>
<div flex="25">
<md-card>
</md-card>
</div>
<div flex="25">
<md-card>
</md-card>
</div>
<div flex="50">
<md-card>
</md-card>
</div>
Now all the three internal divs are taking height 0 px in safari but working fine according to the angular material flex technique in chrome and safari.
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.
I have a problem at the height of the md-content. My app has ng-view and it is 100% of the page, but the md-content don't get 100% of parent. Look that result:
<ng-view flex class="md-padding">
<md-content flex> foo </md-content>
</ng-view>
I try put style="height: 100%" but not work. I've tried the issues but found that solved my problem.
You need to add layout to the ng-view, and make sure the parents also fill 100% height:
<ng-view flex layout="column" class="md-padding">
<md-content flex> foo </md-content>
</ng-view>
You need to add layout & layout-fill to md-content
<md-content layout="row" layout-fill class="md-whiteframe-z1">
Hello
</md-content>