how to disable scroll in md-menu? - angular-material

I use angular-material. I want to hide scroll in menu. And to have just menu with fixed height. but it doesn't make height big enough to disable scroll.
here is my code:
<md-toolbar ng-init="vm.hasLogged()" class="sidebar-left-toolbar" md-theme="{{::triSkin.elements.logo}}">
<md-menu md-offset="-200 56">
<h2 flex class="sidebar-left-title" ng-click="$mdOpenMenu()">{{::vm.sidebarInfo.appName}}</h2>
<md-menu-content aria-label="open menu" width="4" style="height1: 250px">
<md-menu-item >
<md-button md-prevent-menu-close="md-prevent-menu-close">
Setup
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Work
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Reports
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Workflow
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Cuan
</md-button>
</md-menu-item>
<md-menu-item>
<md-button md-prevent-menu-close="md-prevent-menu-close">
Admin
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-if="vm.isLogged" ng-click="vm.logout()">
Logout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
I have tried with style="height: xxx" it makes menu smaller. but not bigger

That's an old question, but I came with the same problem.
I solve it this way:
<md-menu-content width="4" class="maxHeightNone">
.maxHeightNone{
max-height: none;
}
This way, you don't need to specify the min-height and it will adapt to the content of the md-menu.

You can use CSS - CodePen
CSS
md-menu-content {
overflow-y: hidden;
min-height: 400px;
}
The only problem with this solution is that it will affect all menus. There doesn't seem to be a way to assign a class to the menu like other AM directives.

Related

md-sidenav toggle right and changed the width of the html page I am getting some delay when the close button is clicked

When I am using md-sidenav toggle right and changed the width of the html page I am getting some delay when the close button is clicked.Please see the below link. Also how to adjust the sidenav css so that it takes different width based on parent container width-responsive.
http://codepen.io/anon/pen/VaGxrN
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-autofocus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>

jquery mobile ui-input-btn custom icon

Using jquery mobile, ui-input-btn....
<div class="ui-input-btn ui-btn ui-icon-alert ui-btn-icon-top">
<div class="buttonText">Service<br/> Interruptions</div>
<input data-enhanced="true" value="Service Interruptions" type="button" id="service_interruptions">
</div>
I would like to use a custom icon.
Can this be done with this control?
If so, please provide a sample.
Thank you
Add a custom class to wrapping div and then override background-image and background-size of that class using :after pseudo selector.
<div class="ui-input-btn ui-btn ui-custom-icon ui-btn-icon-top">
<div class="buttonText">Service<br/>Interruptions</div>
<input data-enhanced="true" value="Service Interruptions" type="button" id="service_interruptions">
</div>
.ui-custom-icon:after {
background-image: url('icon.png');
background-size: 25px 25px;
}
Demo

How to remove padding from jquery mobile checkbox

I am trying to remove padding from jquery mobile checkbox so that its align left: 0px however i cant get it to work. here is a JSFiddle of my problem: http://jsfiddle.net/jGhqS/4/
How do I align jquery mobile checkbox fully to the lefT?
The easiest way to find out how is to open up your console on your browser, inspect the checkbox and see what other styles are being applied to the checkbox
jQuery mobile created its fancy styles by appending and wrapping HTML around what you make, so your checkbox input and label become
<div class="ui-checkbox">
<input id="rememberCheck" type="checkbox" checked="">
<label id="rememberLb" for="rememberCheck" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">CHECK BOX</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"> </span>
</span>
</label>
</div>
So to remove the spacing I copied jQuery mobile's style and changed the spacing to make the margin on the left smaller
.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {
left: 5px;
}
Like this - http://jsfiddle.net/jGhqS/6/

Center jQuery info alert

How can I center the text and icon in the standard jQuery info alert?
http://jsfiddle.net/3kHWa/
Thank you!
I have looked at the snippet and have it centered with this snippet http://jsfiddle.net/3kHWa/2/
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="padding: 0pt 0.7em;">
<div style="width:auto;margin:0 auto;display:table;">
<span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span>
any size text</div>
</div>
</div>

How do I use jQueryUI's ui-states with JSF2's h:messages?

It seems like it should be very simple to specify that the h:messages generated by JSF should be styled using jQueryUI's nice ui-states. But sadly I can't make it fit. It seems that the jQueryUI states require several elements (div,div,p,span) in order to make it work.
So taking inspiration directly from the jQueryUI theme demo page:
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br/>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
and trying to jam the css class details into my h:message as best I can:
<div class="ui-widget">
<h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/>
</div>
I don't get the icon or sufficient padding etc but the colours make it through. So, the styles are being applied but they aren't working as intended.
Any idea how I can make this work?
On that element, you need a class that gives display: block; to get the position characteristics you want, like this:
<div class="ui-widget">
<h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert block" infoClass="ui-state-highlight ui-corner-all ui-icon-info block"/>
</div>
CSS:
.block { display: block; }
Also if you're interested, here's a listing of all the classes jQuery UI uses for CSS and what they mean.

Resources