Can I create the same functionality
http://angular-ui.github.io/bootstrap/ (chapter: Buttons (ui.bootstrap.buttons)
using angular-material?
Angular-material has radio-button directive but I can’t use it because I don’t want “the dot” on the left side of the label.
Angular-material has also select directive but it is not the same functionality.
Do I have another options?
#Bartłomiej As explained in the documentation... As of V 1.0.5
Grouping with CSS Overrides (scroll all the way down).
You can just add custom classes to override the theme and achieve the same result.
#nitin, I checked your Plunker and it was missing some CSS, for example the css in the example from the documentation works, see below, or check my forked Plunker:
.md-button.left {
border-radius: 10px 0 0 10px;
}
.md-button.middle {
border-radius: 0;
border-left: 1px solid rgba(230, 230, 230, 0.96);
border-right: 1px solid rgba(230, 230, 230, 0.96);
}
.md-button.right {
border-radius: 0 10px 10px 0;
}
.md-button:not([disabled]):hover {
background-color: rgba(193, 193, 193, 0.96);
color: rgba(44, 65, 164, 0.96);
transition: 0.3s;
}
Yes you can get the same functionality.
Plunk : Done here
Script :
var app=angular.module('myApp',['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('primary')
.primaryPalette('blue')
.accentPalette('orange');
})
.controller('ctrl',function($scope){
$scope.buttons={
left:false,
middle:false,
right:false
};
var keys=Object.keys($scope.buttons);
$scope.radioModel='middle';
$scope.save=function(id){
$scope.radioModel=keys[id];
};
});
HTML
<section layout="row">
<md-input-container>
<input type="text" ng-model="radioModel"></input>
</md-input-container>
</section>
<section layout="row">
<md-button ng-click="save('0')" class="md-raised md-primary">left</md-button>
<md-button ng-click="save('1')" class="md-raised md-primary">middle</md-button>
<md-button ng-click="save('2')" class="md-raised md-primary">right</md-button>
</section>
Related
Been playing around with angular material, and absolutely love it. But found one rather surprising thing, and almost certain I missed a page in the manual, or well, many pages including that one.
Thought I would add a warning text along the lines of "Thats not your password" for failed login. And from bootstrap I could easily do this with and alert box.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
However, I can't find a similar set for angular material. Yes, there are dialog, and toasts, but I wanted something simpler.
And yes I could write my own class, but it feels like there should be some predefined class for it?
I've been looking for such a feature too. The closest thing I can find is md-whiteframe. You can do an Angular Material type alert like this:
<div layout="row" layout-padding layout-wrap layout-fill>
<div md-whiteframe="3" class="padded">
Some text here
</div>
</div>
However, the md-warn class doesn't work with this directive.
as far i can see now there's no alert box in angular material like bootstrap
so i extract only alert css role from bootstrap
.alert {
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 5px; }
.alert-heading {
color: inherit; }
.alert-link {
font-weight: bold; }
.alert-dismissible {
padding-right: 2rem; }
.alert-dismissible .close {
position: relative;
top: -.125rem;
right: -1rem;
color: inherit; }
.alert-success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d; }
.alert-success hr {
border-top-color: #c1e2b3; }
.alert-success .alert-link {
color: #2b542c; }
.alert-info {
background-color: #d9edf7;
border-color: #bcdff1;
color: #31708f; }
.alert-info hr {
border-top-color: #a6d5ec; }
.alert-info .alert-link {
color: #245269; }
.alert-warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b; }
.alert-warning hr {
border-top-color: #f7ecb5; }
.alert-warning .alert-link {
color: #66512c; }
.alert-danger {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442; }
.alert-danger hr {
border-top-color: #e4b9b9; }
.alert-danger .alert-link {
color: #843534; }
Yes Angular Material has Dialog, you can use Alert Dialog, documentation here
Add $mdDialog to your controller as dependency and customise below code.
$scope.showAlert = function(ev) {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
.targetEvent(ev)
);
};
Call showAlert() from your html
<md-button class="md-primary md-raised" ng-click="showAlert($event)" flex="100" flex-gt-md="auto">
Alert Dialog
</md-button>
How to add line break in tooltip
I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code
http://codepen.io/apps4any/pen/RWQLyr
Html
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-content layout-padding="">
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
List1<br>
List2<br>
List3<br>
List4
</md-tooltip>
</md-button>
<div style="margin-top: 150px;">
</div>
</md-content>
</div>
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
box-shadow: none;
border: none;
transform: none;
-webkit-transform: none; }
.tooltipdemoBasicUsage .left {
top: 70px !important;
left: 56px !important; }
.tooltipdemoBasicUsage .right {
top: 70px !important;
right: 56px !important; }
JS
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.demo = {};
});
Adding this CSS seems to work in your case (with the <br>s):
md-tooltip .md-content {
height: auto;
}
I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.
Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.
In this case use
md-tooltip ._md-content {
height: auto;
}
and for specific class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
Since angular-material version >1.1.2 you can simply override .md-tooltip class: (JsFiddle)
.md-tooltip {
height: auto;
}
And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions
Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/>
into it.
md-tooltip .md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
md-tooltip {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
overflow: visible !important;
white-space: normal !important;
}
md-tooltip ._md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
You can view the styling for md-tooltip (v0.11.4) here: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
My own overwrites to the material design styling to allow nice looking multi-line tooltips:
md-tooltip {
font-family: Roboto, 'Helvetica Neue', sans-serif;
.md-background {
border-radius: inherit;
}
.md-content {
height: auto;
width: 400px;
max-width: 400px;
padding: 8px;
white-space: initial;
}
}
#media screen and (min-width: 600px) {
md-tooltip .md-content {
font-size: 14px;
height: auto;
width: 300px;
padding: 8px;
max-width: 300px;
}
}
Or you can use white-space: pre-line; in the custom class of your md tooltip. :)
After a while searching for a solution FROM A VARIABLE CONTENT:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}
See stackblitz example
I am using angular_material 1.1.8, for me single answer didn't work, a combination did.
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
Hope it helps..
angular material tool tip is warping all content in div so this its working
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
How to make one radio button option should be checked by default.
I tried to give ng-model, and ng-init but its not working.
My Html :
<div bindonce ng-repeat="row in results.favorites" style="padding: 0px 10px; white-space: nowrap; border-bottom: 1px solid #efefef; border-top: 1px solid #eee; border-left: 1px solid #efefef;">
<input type="radio" ng-click="setFavoriteDashboard(row.id)" ng-model="selectedRow" name="favRadioSel" style="opacity: 1;" class="pointer"/>
<span bo-text="row.title" style="margin: 10px; position: relative; top: 3px;"></span>
</div>
I have given checked="checked" also but it is default selecting last value I want first option should be checked by default.
My JS:
$scope.results = {
favorites: [{
id: "WatchList1",
title: "WatchList1"
}, {
id: "WatchList2",
title: "WatchList2"
}, {
id: "WatchList3",
title: "WatchList3"
}]
};
$scope.selectedRow = "WatchList1";
Added Demo : http://plnkr.co/edit/KA9HyQ3bHxJo2Cm9qFm3?p=preview
Each radio element should have its unique value and just bind it with ng-model. In your controller, set on your model the value of your first radio element.
HTML
<input type="radio" ng-click="setFavoriteDashboard(row.id)" ng-model="selectedRow" value="{{ row.id }}" name="favRadioSel" style="opacity: 1;" class="pointer"/>
Controller
$scope.selectedRow = "" //value of your first row.id
Working example : http://plnkr.co/edit/cNcgeGZPvQKTgOtgaUqE?p=preview
each radio button need ng-model! please check oficial page for easy to understand code which you can edit in plunker and play around.
Your ng-model="selectedRow" should be an object with id property. Please see working example in my plunker
I need to implement a menu with the exact same looks as onsen sliding-menu,but that slides from top. I was thinking to use onsen gestures to be able to drag the menu, but the gestures sample provided in the onsen guide does not work. Am I missing something?
<ons-gesture-detector>
<div id="detect-area" style="width: 300px; height: 300px;background-color:blue;">
Swipe Here
</div>
</ons-gesture-detector>
<script>
alert("in");
$(document).on('swipeleft', '#detect-area', function() {
alert("swipe");
})
</script>
Try this, it should work. Don't forget to add jquery first.
<ons-gesture-detector style="height: 300px; margin: 50px 50px;">
<div id="hoge" style="border: 1px solid #ccc; background-color: #f9f9f9; width: 100%; height: 300px; line-height: 300px; text-align: center; color: #999;">
...
</div>
</ons-gesture-detector>
<script>
var eventName =
'drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight ' +
'swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate';
$(document).on(eventName, '#hoge', function(event) {
if (event.type !== 'release') {
$(this).text(event.type);
}
});
</script>
My problem has to do with how mobile browsers seem to be ignoring the border radius attribute when inside a div with overflow:scroll. Below is an example of the problem in a jsfiddle that needs to be opened in a mobile browser. As you scroll you will see that the red boxes poke out of the border-radius corners at the top and bottom of the grey element. If anyone knows of anyway to get rid of this problem, please help! Thanks in advance!
http://jsfiddle.net/Thatguyhampton/LLn74/
html:
<div class="card scrollable">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
css :
.scrollable {
box-sizing: border-box;
overflow: auto;
overflow-y: overlay;
position: relative;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.card {
height: 300px;
width: 100px;
background-color: grey;
border-radius: .5em;
}
.content {
height: 50px;
width: 100%;
background-color : red;
margin-top: 10px;
margin-bottom: 10px;
}
Just want to stress that I only see this on mobile browsers.
remove the -webkit-overflow-scrolling: touch; and it will fix it :)