I'm trying to build a SPA using AngularJS. However, I cannot get the routing working for the life of me. Basically I cannot get it to where when you click on one of the list items it routes the view to display different content.
I'm thinking that maybe one of the angularJS files is cancelling itself out or that I am messing up something in the directive.
index.html:
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "assetView.html",
controller: "MainController"
})
.state("assetView", {
url: "/assetView",
templateUrl: "assetView.html",
controller: "MainController"
})
;
}
]);
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('MainController', function MainController($scope){
console.log("inside of MainController");
var vm = this;
$scope.selectedAsset = undefined;
$scope.startDate;
$scope.endDate;
// Current array for testing typeahead feature
// This needs to be an ajax call in the future to populate
// the asset array w/ all ticker symbols
$scope.asset = ['AAAP', 'AABA', 'AABA', 'AAME', 'AAOI',
'AAON', 'AAPL', 'AAWW', 'AAXJ', 'BMTC', 'BNCL',
'BNDX', 'BNFT', 'BNSO', 'CAKE', 'CALA', 'CALD', 'CALI',
'CALL', 'CALM', 'DWTR', 'DXGE', 'DXJS', 'ERII',
'ESBK', 'ESCA'];
/* Datepicker Functions */
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
startDate = getDate(this);
console.log("start date: " + startDate);
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
endDate = getDate(this);
console.log("end date: " + endDate);
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
/* End of Datepicker functions */
/* Chart Data */
var myChart = Highcharts.chart('highchartsContainer', {
chart: {
type: 'column'
},
title: {
text: 'Stock Header Here'
},
colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
xAxis: {
categories: ['Div', 'EL Fix', 'LTT']
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Sample1',
data: [1, 4, 4]
}, {
name: 'Sample2',
data: [5, 7, 3]
},{
name: 'Sample3',
data: [2, 3, 4]
}]
});
/* End Chart Data */
/* Highchart 2 */
var myChart2 =
Highcharts.chart('highchartsContainer2', {
chart: {
type: 'column'
},
title: {
text: 'Stock Header Here'
},
colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
xAxis: {
categories: ['Div', 'EL Fix', 'LTT']
},
yAxis: {
title: {
text: ''
}
},
series: [{
name: 'Sample1',
data: [3, 1, 1]
}, {
name: 'Sample2',
data: [9, 8, 2]
},{
name: 'Sample3',
data: [9, 2, 5]
}]
});
/* End Highchart 2 */
/* Highchart 3 */
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?', function (data) {
Highcharts.stockChart('highchartsContainer3', {
rangeSelector: {
selected: 1
},
title: {
text: 'GOOG Stock Price'
},
series: [{
name: 'GOOG Stock Price',
data: data,
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
/* End Highchart 3 */
});
/* Body Styling */
body {
background-image: url("images/background_image1.png");
}
/* End Body Styling */
/* help.html div */
#helpDiv{
height: 500px;
width: 500px;
background-color: red !important;
}
/* End help.html div */
/* Wrapper Styling */
.wrapper{
background-color: #FFFFFF;
box-shadow: 0px 30px 40px rgba(0,0,0,.5);
margin: 0 auto;
margin-top: 60px;
margin-bottom: 80px;
width: 1200px;
height: 1350px;
}
/* End Wrapper Styling */
/* Header Styling */
.header{
background-color: #66A8EA;
margin: 0 auto;
width: 1250px;
height: 100px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
left: 0;
right: 0;
}
.leftTriangle{
width: 0;
height: 0;
margin-top: 46px;
border-style: solid;
border-width: 0 25px 20px 0;
border-color: transparent #054e9c transparent transparent;
}
.rightTriangle{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 0;
border-color: #054e9c transparent transparent transparent;
margin-top: -20px;
margin-left: 1225px;
}
#stockImageSVG{
height: 65px;
width: 65px;
margin-left: 40px;
margin-top: 20px;
position: absolute;
}
#uncImageSVG{
margin-left: 150px;
margin-top: 10px;
height: 80px;
width: 300px;
position: absolute;
}
#searchBar{
margin-left: 760px;
margin-top: 20px;
width: 388px;
margin-right: 60px;
}
#searchBarButton{
margin-top: -1px;
}
/* Typeahead Dropdown Styling */
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #333333;
text-decoration: none;
background-color: #B9DDFA !important;
}
/* End Typeahead Dropdown Styling */
#dateRangeSelector{
position: absolute;
color: white;
margin-left: 760px;
margin-top: 60px;
}
#from, #to{
color: #5B5B5B;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: thin;
border-color: #D4D4D4;
font-family: Arial;
}
#toLabel{
margin-left: 26px;
}
/* End Header Styling */
/* Navbar Styling */
#custom-bootstrap-menu{
position: absolute;
margin-top: 140px;
margin-left: 30px;
margin-right: 30px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 12px;
background-color: rgba(230, 225, 225, 0.51);
border-width: 0px;
border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
width: 93px;
text-align: center;
color: rgba(119, 119, 119, 1);
background-color: rgba(247, 247, 247, 1);
margin: 0 auto;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(51, 51, 51, 1);
background-color: rgba(169, 207, 242, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(85, 85, 85, 1);
background-color: rgba(219, 219, 219, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #e6e1e1;
}
/* End Navbar Styling */
/* Data Table Styling */
#tableArea{
display: inline-block;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 0px;
margin-top: 190px;
margin-left: 30px;
height: 500px;
width: 500px;
}
#tableContainer{
position: absolute;
margin-top: 10px;
margin-left: 40px;
width: 500px;
height: 480px;
background-color: #fff;
}
#dataTable2{
margin-top: 20px;
margin-left: 50px;
margin-right: 10px;
width: 400px;
background-color: #F9F9F9;
}
/* End Data Table Styling */
/* Chart Area Styling */
#chartArea{
display: inline-block;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 0px;
margin-left: -10px;
margin-top: 190px;
height: 500px;
width: 621px;
}
#chartContainer{
background-color: #fff;
margin-top: 10px;
margin-left: 80px;
height: 480px;
width: 500px;
}
/* End Chart Area Styling */
/* customArea3 Styling */
#customArea3{
display: inline-grid;
height: 520px;
width: 555px;
margin-left: 30px;
margin-top: -10px;
background-color: #EBEBEB;
border-radius: 0px 0px 0px 5px;
}
#customArea3Container{
height: 480px;
width: 500px;
margin-top: 10px;
margin-left: 40px;
background-color: #fff;
}
/* End Custom Area 3 Styling */
/* customArea4 Styling */
#customArea4{
display: inline-grid;
position: relative;
margin-top: -10px;
height: 520px;
width: 561px;
margin-left: -5px;
background-color: #EBEBEB;
border-radius: 0px 0px 5px 0px;
}
#customArea4Container{
height: 480px;
width: 500px;
margin-top: 10px;
margin-left: 20px;
background-color: #fff;
}
/* End Custom Area 4 Styling */
/* Highcharts Styling */
#highchartsContainer{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
#highchartsContainer2{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
#highchartsContainer3{
position: absolute;
margin-top: 60px;
margin-left: 10px;
width: 480px;
height: 350px;
}
/* End Highcharts Styling */
/* Print Button Styling */
#printButton{
position: absolute;
margin-top: 200px;
margin-left: 1150px;
}
#printButton:hover{
background-color: #99badd;
border-color: #fff !important;
}
/* End Print Button Styling */
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>c426</title>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<!-- Angular JS / Angular JS UI Router CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Style Sheets -->
<link rel="stylesheet" href="project.css">
<!-- Controllers -->
<script src="js/app.js" type="text/javascript"></script>
<script src="js/MainController.js" type="text/javascript"></script>
<!-- SweetAlert2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.all.min.js"></script>
<!-- Highcharts CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/adapters/standalone-framework.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- Favicon for Browser Tab -->
<link rel="shortcut icon" type="image/x-icon" href="images/uncIcon2.ico">
</head>
<body ng-controller="MainController">
<div class="header">
<img id="stockImageSVG" src="images/stock_bar_image.svg"/>
<a href="http://www.unc.edu/" target="_blank">
<img id="uncImageSVG" src="images/UNC_logo_white.png"/>
</a>
<div id="dateRangeSelector">
<label for="from">From</label>
<input type="text" id="from" name="from">
<label id="toLabel" for="to">To</label>
<input type="text" id="to" name="to">
</div>
<div class="row">
<div class="col-lg-6">
<div id="searchBar" class="input-group">
<input type="text" class="form-control" placeholder="Search for asset..."
uib-typeahead="name for name in asset | filter:$viewValue | limitTo:8" class="form-control"
ng-model="selectedAsset"/>
<span class="input-group-btn">
<button id="searchBarButton" class="btn btn-default glyphicon glyphicon-search" type="button"></button>
</span>
</div>
</div>
</div>
<div class="leftTriangle"></div>
<div class="rightTriangle"></div>
</div>
<div class="wrapper">
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>GOOGL</li>
<li><a ui-sref="assetView">BIDU</a></li>
<li><a ui-sref="home">YNDX</a></li>
<li>AAPL</li>
<li>IBM</li>
<li>TWTR</li>
<li>VZ</li>
<li>WIFI</li>
<li>FB</li>
<li>IAC</li>
<li>GDDY</li>
<li>AOL</li>
</ul>
</div> <!-- Ends Custom Navbar -->
<button type="button" id="printButton" onclick="window.print();"
class="btn btn-default glyphicon glyphicon-print"
title="Print Page"></button>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<div id="assetView">
<div id="tableArea">
<div id="tableContainer">
<table id="dataTable2" class="table table-bordered">
<thead>
<tr>
<th>{{asset[0]}}</th>
<th>{{asset[11]}}</th>
<th>{{asset[17]}}</th>
<th>{{asset[20]}}</th>
<th>{{asset[25]}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>0.001</td>
<td>0.002</td>
<td>0.001</td>
<td>0.002</td>
</tr>
<tr>
<td>b</td>
<td>0.002</td>
<td>0.003</td>
<td>0.001</td>
<td>0.002</td>
</tr>
<tr>
<td>c</td>
<td>0.2</td>
<td>0.3</td>
<td>0.001</td>
<td>0.002</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="chartArea">
<div id="chartContainer">
<div id="highchartsContainer"></div>
</div>
</div>
<div id="customArea3">
<div id="customArea3Container">
<div id="highchartsContainer2"></div>
</div>
</div>
<div id="customArea4">
<div id="customArea4Container">
<div id="highchartsContainer3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have a responsive fixed top menu that opens after clicking on the Menu icon. Then I would like to hide it after clicking on one of the menu items. Otherwise it covers part of the section that slides up.
I have used the code from this page: http://www.w3schools.com/howto/howto_js_topnav.asp
What do I have to change to the code to hide the list after clicking on one of the menu items?
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
var myapp = angular.module('sortableApp', ['ui.sortable']);
myapp.controller('sortableController', function($scope) {
var tmpList = [];
for (var i = 1; i <= 6; i++) {
tmpList.push({
text: 'Item ' + i,
value: i
});
}
$scope.list = tmpList;
$scope.sortingLog = [];
$scope.sortableOptions = {
update: function(e, ui) {
var logEntry = tmpList.map(function(i) {
return i.value;
}).join(', ');
$scope.sortingLog.push('Update: ' + logEntry);
},
stop: function(e, ui) {
// this callback has the changed model
var logEntry = tmpList.map(function(i) {
return i.value;
}).join(', ');
$scope.sortingLog.push('Stop: ' + logEntry);
}
};
});
.list {
list-style: none outside none;
margin: 10px 0 30px;
}
.item {
width: 200px;
padding: 5px 10px;
margin: 5px 0;
border: 2px solid #444;
border-radius: 5px;
background-color: #EA8A8A;
font-size: 1.1em;
font-weight: bold;
text-align: center;
cursor: pointer;
}
.ui-sortable-helper {
cursor: move;
}
.well {
cursor: move;
}
/*** Extra ***/
body {
font-family: Verdana, 'Trebuchet ms', Tahoma;
}
.logList {
margin-top: 20px;
width: 250px;
min-height: 200px;
padding: 5px 15px;
border: 5px solid #000;
border-radius: 15px;
}
.logList:before {
content: 'log';
padding: 0 5px;
position: relative;
top: -1.1em;
background-color: #FFF;
}
.container {
width: 1100px;
margin: auto;
}
h2 {
text-align: center;
}
.floatleft {
float: left;
}
.clear {
clear: both;
}
.nestedDemo ul[dnd-list],
.nestedDemo ul[dnd-list] > li {
position: relative;
}
.nestedDemo .dropzone ul[dnd-list] {
min-height: 42px;
margin: 0px;
padding-left: 0px;
}
.nestedDemo .dropzone li {
background-color: #fff;
border: 1px solid #ddd;
display: block;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<div ng-app="sortableApp">
<div ng-controller="sortableController" class="container">
<h2>ui.sortable demo</h2>
<div class="col-md-12">
<div class="span4">
<div ui-sortable="sortableOptions" ng-model="list">
<div ng-repeat="item in list" class="well">
{{item.text}}
</div>
</div>
</div>
</div>
<div class="floatleft" style="margin-left: 20px;">
<ul class="list logList">
<li ng-repeat="entry in sortingLog track by $index">
{{entry}}
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
Dynamically insert items on this list and it should be able to add list dynamically. List and items should be added on button click event. On each button click, a pop up should arise and ask for corresponding item/list name. List cannot be dragged into an item. They can only be draged above or below existing list. view of output
List and items should be sorted after each drag as shown in the attached image. In the attached image section stands for list and lecture stands for image.
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;
}
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>