In Angular Material you can set the width the of md-menu-content section within an md-menu by setting the width eg.
<md-menu-content width="2">
Is there a way to do the same for height? Using height="x" doesn't seem to work.
Thanks!
I just used this css: md-menu-content { max-height: 90vh; }, which allows the menu height to grow up to 90% of the view height. Works great!
Related
I am using component based architecture and want to show bootstrap modal which gets adjusted to image height and width.
Most of the forums suggested to use height and width in percent but this will not going to help as image size can vary.
Has anyone achieved this?
There's a simple solution for this. first of all you will need to override the modal's width property (height is auto adjustable and shouldn't be a problem), the modal window uses the .modal-dialog class, so use !importent to override width
.modal-dialog {
width: fit-content !important;
}
content-box will adjust the width according to what the element contains.
here's a demo
While using md-slider from angular-material, if the range of max and min is less, then the slider is looking fine:
However if the range of value is wide (1-100) then the pink line of the slider is getting overlapped by grey dots:
Is there a way to remove these grey dots from md-slider in md-discrete mode ?
Angular-material discrete md-slider dots can be removed using the following CSS snippet
.md-track-ticks canvas { display: none; }
In my case, there was CSS naming issue according to which version.
This works for me.
Thanks Salal.
._md-track-ticks canvas, .md-track-ticks canvas { display: none; }
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX
Default Material Design gives a sidenav width of 304px. I am trying to implement material design's use of flex boxes, by adding in a flex="66" attribute inside the md-sidenav element.
When I did, it shortened the sidenav vertically, instead of horizontally.
It seems like I'm unable to override that 304px without pure CSS, which, although I can accomplish, is something I was specifically hoping to stay away from.
I haven't seen this concept referred to in the Material Design documentation. Anyone else have this issue?
If you will look at angular-material.css as below
md-sidenav is displayed as
display : none
when its closed & its displayed as
display : flex
when its visible.
If you want to change its width you need to write below lines in yr custom.css which you should load after loading angular-material.css
width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;
replace 500 with yr custom value.
I am using Bootstrap 3 with the following sticky footer from http://getbootstrap.com/examples/sticky-footer/
I set the #footer to min-height: 420px; so it will work responsively and adapt to narrow width and expand in height and stack the column boxes. This works just fine.
But when setting a min-height the footer will cover the content in top of it.
Is there a solution to this so the footer will be "pressed" down?
This feature works by also setting a bottom margin on the body to offset the size of the footer.
For instance, sticky-footer.css contains:
body {
margin-bottom: 60px;
}
You'll need to adjust it to the height of your #footer.