How do I fill the screen vertically with e.g. a md-content or just a div? I still want to organize the content within as column.
<md-content layout="column" layout-fill>
My content!
</md-content>
Regarding #stack item answer angular material says:
In general, <md-content> components are not designed to be nested inside one another.
So I would suggest changing the first md-content to a normal div.
<div layout="row" flex>
<md-content layout="column" flex>
My content
</md-content>
</div>
When you have a row with a flex attribute, it fills the screen vertically.
In the following example, "My content" will fill all available space (vertically and horizontally)
<md-content layout="row" flex>
<md-content layout="column" flex>
My content
</md-content>
</md-content>
Related
I have set up a sticky footer in an HTML page. I want it to stick to the bottom of the page and anchor at the bottom of the content section. Code:
`<div id="content" class="row">`
`<div class="columns large-12" style="width: 100%; height:400px;">`
`<!--Main content here-->`
`</div>`
`</div>`
`<div class="row ">`
`<div class="footer large-12 sticky" data-sticky data-stick-to="bottom" data-top-anchor="content:bottom">`
`<div class="text-center">`
`<!--footer content here-->`
`</div>`
`</div>`
`</div>`
In order to test, I styled the content and footer divs with borders. The footer sticks to the bottom, but if I resize the browser by moving the bottom of it up without stopping, the footer does not anchor to the bottom of the content div.
However, if I move the bottom of the browser window up and stop when the top border of the footer is on the bottom border of the content div I can actually see it attach to the bottom of the content div, and it stays attached when I again move the bottom of the browser up.
The same thing happens on the way down after the footer has attached to the contend div: if I pull the bottom of browser window down and stop when I see the bottom of the content div, when I start pulling it down again, it detaches from the content div and sticks to the bottom.
Is there any way to fix this so that it works correctly if a user resizes the browser this manner?
I am new to angular material. From angular material doc i can see it can be positioned 'start' or 'end'.
<div style="border:solid 1px red;">
<mat-sidenav-container>
<mat-sidenav class="sidenav"
position="end" <!-- want to position top or bottom here-->
[opened]="sidenavOption.open"
[mode]="sidenavOption.mode">
Sidenav content
</mat-sidenav>
<ng-content></ng-content>
</mat-sidenav-container>
</div>
I would like to position 'top' or 'bottom'
Can anyone help me how to do this?
Thanks
AFAIK the sidenav as the name suggests can only be present on the right (end) or left (start) side of your page. Even though the material design specifications allow a bottom drawer (here).
As stated here there is no other property than position to specify the position other than left or right.
It seems that you would either need to make your own implementation of such a drawer -But for that you can extend from the material design classes and build upon them- or you could use a MatBottomSheet, which is almost the same, but can only be used as a kind of bottom drawer.
I am using the age old trick to make a div scrollable like below:
<div style="height: 100px; overflow: scroll;">
Messages within div.
Messages within div.
Messages within div.
Messages within div.
</div>
But the scroll bar is never shown on the iPad.
Does anybody have an idea how to add a scroll bar or at least some sort of visual indication that the div is scrollable for the iPad?
I have a Div Which Shows on Click of Table Cell of another(TableDiv) Div.I need to set the Boundraies (Limits) depend on the TableDiv Width and Height.My Draggable is out side of TableDiv.
<div class="TableDiv">
<table>
</table>
</div>
<div id="draggingDiv">
</div>
My Jquery Code as below
$("#draggingDiv").draggable({reset:true});
Thanks In Advance
Its clearly an issue with css positioning.
It would be great if u share the css styling of your divs.
But according to me adding this to your style sheet would solve the problem
position:absolute;
width : 100%;
height : 100%;
% Sizing fixes the div to 100% of its parent div.
Same thing could be applicable to draggable element too.
I've a CSS style for my footer in a jquery mobile app:
[data-role=footer]{
bottom:0px;
position: relative !important;
top: auto !important;
width:100%;
}
Now I want that the footer is always at the bottom of the page, including the case that the content is higher then the page so I have to scroll.
Look and feel should be similar to a normal website, opened in safari on iOS.
Is there a way to do that?
In jquery-mobile to create a fixed footer just do:
<div data-role="footer" data-position="fixed">
your footer data
</div>