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.
Related
I am using horizontal bootstrap card and I want to align a text at the end of the second column. I tried to use card-footer but it doesn't seems to work example. Is there a way to achieve this.
card-body and card-footer only automatically align themselves properly, and as Bootstrap's example shows when they are directly under the card class. However given your layout, you'd need the col-md-8 to be a flex with column direction.
So add the classes d-flex flex-column to your col-md-8 and your footer will stick to the bottom of the second column. JSFiddle
I have the following example. When I expand the panel, the remaining items below it goes down to make room for the content of the opened panel.
However, what I need is, when I expand the panel, it should scroll upwards so the header of the opened panel is on top. Reason being is that, I am planning to make the content height to occupy as much height as possibly available in the screen, making the opened panel almost occupy most of the screen.
For Angular Material Component's Expansion Panel,
you can use the following css for making the expanded expansion-panel to be present above all, ie the expanded expansion panel will move to the first position in the list.
--------- styles.css ---------.
.mat-expansion-panel,
.mat-accordion {
display: flex !important;
flex-direction: column;
}
.mat-expansion-panel.mat-expanded {
order: -1;
}
Approach :
Give .mat-accordion, display: flex and manipulate order property on the expanded expansion-panel to achieve the goal.
Stackblitz- Demo showing expaned panel moving to top in the list
I have this example:
jsfiddle.net/6mNpp/
Is it possible, to prevent the scrolling of the left menu, when it is open and the whole site is scrolling? I mean, when I open the left menu and scroll the content, then the left menu is scrolling as well. How to make them with independent scrolling?
Thanks
Nik
You can set the panel fixed with CSS. With this, the left panel is not scrolling when the content is scrolling.
The code is the same that the JSFiddle, just add in the style, position:fixed
<div data-role="panel" id="defaultpanel" data-display="push" data-theme="b" style="overflow:auto; position: fixed;" data-animate="false">
Reference: Positioning Panels
More info...
JqueryMobile roadmap http://jquerymobile.com/roadmap/ says independent scolling should arrive in version 1.7
Another possible hack workaround maybe adding the divs via an iframe may offer a clumsy solution.
I am wondering in MVC(ie 3) + Razor, could we make partial view have the same effect as iframe? For example right side scroll bar, fixed height, etc.
Thanks a lot!
You can make use of CSS overflow, overflow-y and overflow-x properties to achieve the points you gave examples for (right side scroll bar, fixed height), making sure to include a height style or even width if required.
.partial-view-container
{
height:400px;
overflow:scroll;
}
The possible values for the overflow properties are
visible (default)
hidden
scroll
auto
So I guess your Razor markup would look something like this
<div class="partial-view-container">
#Html.Partial("InnerPartialView")
</div>
Further explanation at css tricks or w3schools
I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle