recursive menuItems not render properly - angularjs

Need help to fix the recursive dropdown menu.
please visit
http://plnkr.co/edit/1mKljtoS9R0gAdACLxu7?p=preview
this app is not for desktop only. open preview in separate window, or you will not see the menus.
the menus do not drop down as they suppose to. so please help
//index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="menuCtrl">
<script type="text/ng-template" id="tree-renderer.html">
<a class="dropdown-toggle" data-toggle="dropdown" href="#{{menuItem.title}}">{{menuItem.title}}
<b ng-if="menuItem.children.length > 0" class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" ng-repeat="menuItem in menuItem.children" ng-include="'tree-renderer.html'"></li>
</ul>
</script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">VARCITI</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li ng-repeat="menuItem in menuItems" ng-include="'tree-renderer.html'"></li>
</ul>
</div>
</div>
</div>
<div id="main" class="container main">
<div ng-view></div>
</div>
</body>
</html>
// script.js
var app = angular.module('app', []);
app.controller('menuCtrl', function($scope) {
$scope.menuItems = [{"id":3,"title":"Breaks","children":[{"id":32,"title":"Recon","children":[{"id":322,"title":"Transactions","children":[]},{"id":321,"title":"Matching","children":[]}]},{"id":31,"title":"Exception","children":[]}]},{"id":4,"title":"Reference","children":[{"id":46,"title":"User Setup","children":[{"id":463,"title":"User Role","children":[]},{"id":462,"title":"User Group","children":[]},{"id":461,"title":"User","children":[]}]},{"id":44,"title":"Currency","children":[{"id":443,"title":"FX Rates","children":[]},{"id":441,"title":"Currency","children":[]},{"id":442,"title":"Currency Group","children":[]}]},{"id":45,"title":"Product Code","children":[]},{"id":41,"title":"Instrument","children":[]},{"id":43,"title":"Party","children":[{"id":435,"title":"Legal Entity","children":[]},{"id":431,"title":"Broker","children":[]},{"id":434,"title":"Client","children":[]},{"id":433,"title":"Exchange","children":[]},{"id":432,"title":"Trader","children":[]}]},{"id":42,"title":"Trading Account","children":[]}]},{"id":2,"title":"Rules","children":[{"id":21,"title":"Rate Matrix","children":[{"id":211,"title":"Rates","children":[]},{"id":212,"title":"Charges","children":[]}]},{"id":22,"title":"Matching","children":[]},{"id":23,"title":"Transformation","children":[]}]},{"id":1,"title":"Analytics","children":[{"id":12,"title":"Transactions","children":[]},{"id":13,"title":"Reports","children":[]},{"id":11,"title":"Dashboard","children":[]}]},{"id":5,"title":"Review","children":[{"id":56,"title":"Invoice","children":[{"id":562,"title":"Receipt","children":[]},{"id":561,"title":"Generation","children":[]}]},{"id":54,"title":"Matching","children":[{"id":543,"title":"GU2 Recon","children":[]},{"id":542,"title":"Monthly","children":[]},{"id":541,"title":"Daily","children":[{"id":5412,"title":"Monthly","children":[]},{"id":5411,"title":"Daily","children":[]}]}]},{"id":53,"title":"Invoice","children":[{"id":532,"title":"Capture","children":[]},{"id":531,"title":"Recon","children":[]}]},{"id":51,"title":"Cost Center","children":[]},{"id":52,"title":"Manual Accruals","children":[{"id":521,"title":"View/Create","children":[]},{"id":523,"title":"Review","children":[]},{"id":522,"title":"Bulk Upload","children":[]}]},{"id":55,"title":"Exception","children":[]}]}];
});
//styles.css
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}


problem found, somehow # in the href href="#{{menuItem.title}}" causes exception. it works after removing #. Can someone explain the reason ?
Uncaught Error: Syntax error, unrecognized expression: #View/Create jquery-2.1.1.js:1437
Sizzle.error jquery-2.1.1.js:1437
Sizzle.tokenize jquery-2.1.1.js:2051
Sizzle.select jquery-2.1.1.js:2452
Sizzle jquery-2.1.1.js:843
jQuery.fn.extend.find jquery-2.1.1.js:2668
jQuery.fn.init jquery-2.1.1.js:2776
jQuery jquery-2.1.1.js:76
getParent bootstrap.js:775
(anonymous function) bootstrap.js:758
jQuery.extend.each jquery-2.1.1.js:375
jQuery.fn.jQuery.each jquery-2.1.1.js:139
clearMenus bootstrap.js:757
Dropdown.toggle bootstrap.js:699
jQuery.event.dispatch jquery-2.1.1.js:4409
elemData.handle jquery-2.1.1.js:4095

Related

Align center Circles CSS (number of circles are handled by AngularJS)

Below how it looks :
Below What I would like to have :
or if getNumber return more for example
(so basicaly the circle are always align center whatever number my getNumber return)
Below the AngularJS code :
<div class="w3-container">
<span ng-repeat="i in getNumber(data.numberOfState) track by $index" style="margin-right:10%;">
<div id="advanced" class="circle" ></div>
</span>
<div id="barre"></div>
</div>
Below the CSS code :
.circle {
border-radius: 50%;
width: 18px;
height: 18px;
background: RoyalBlue;
display: inline-block;
}
#barre{
width: 100%;
height: 3px;
background: RoyalBlue;
margin-top: -17px;
}
#advanced {
width: 18px;
height: 18px;
/* TODO */
}
.circleActive {
border-radius: 40%;
width: 15px;
height: 15px;
background: RoyalBlue;
display: inline-block;
}
How to align center the circle on the bar ?
right: 50%;
left: 50%;
position: absolute;
With this it works but since my circle are iterate by my javascript there are showing at the same coordinated, so I can see only one.

Add text-align:center; to .circle parent
.w3-container {text-align:center;}
Here's small snippet for you
.parent {text-align:center;}
.child {height:14px; width:14px; background:royalblue; display:inline-block;}
<div class="parent">
<span class="child"></span>
</div>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>

This is easy if you are using a flexbox - you only need to give:
display:flex;
width:100%;
justify-content: space-around;
Some suggestions though:
Using id inside an ng-repeat is wrong, as you will then get multiple ids which is invalid.
barre is omitted and using an after psuedo element just for more markup readability.
The line (using after) is absolutely positioned with respect to the flexbox
See demo below:
.circle {
border-radius: 50%;
width: 18px;
height: 18px;
background: RoyalBlue;
display: inline-block;
}
.wrapper {
display:flex;
width:100%;
justify-content: space-around;
position:relative;
}
.wrapper:after {
position:absolute;
content:'';
display:block;
width: 100%;
top:7px;
height: 3px;
background: RoyalBlue;
}
.advanced {
width: 18px;
height: 18px;
}
.circleActive {
border-radius: 40%;
width: 15px;
height: 15px;
background: RoyalBlue;
display: inline-block;
}
<div class="w3-container">
<div class="wrapper">
<div class="circle advanced" ></div>
<div class="circle advanced circleActive" ></div>
<div class="circle advanced" ></div>
</div>
</div>

You can use display: flex; for container. To center elements add justify-content: center;.
.line {
display: flex;
justify-content: center;
margin: 50px;
border-top: 2px solid blue;
}
.circle {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0 20px;
background-color: blue;
border-radius: 50%;
transform: translateY(-50%);
}
<div class="line">
<div class="circle"></div>
</div>
<div class="line">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="line">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

How to bind value of an input[range] to an array?

I'm trying to create a dynamically array(arr) with a length of ng-model(numberFloor) from input[range].
var app = angular.module("houseBuilder", ['ngSanitize']);
app.controller('myCtrl', function($scope) {
$scope.numberFloor = 1;
$scope.floor = '<div class="home-floor"><div class="home-floor-window"></div><div class="home-floor-window"></div></div>';
$scope.arr = [$scope.numberFloor]; // How to bind a dynamically array with length equal numberFloor?
});
.home {
display: inline-block;
width: 300px;
}
.home-roof {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 100px solid black;
position: relative;
}
.home-roof:after {
content:'';
position:absolute;
top: 4px;
left: -137px;
width: 0;
height: 0;
border-left: 137px solid transparent;
border-right: 137px solid transparent;
border-bottom: 92px solid white;
}
.home-floor {
height: 100px;
border-right: 5px solid black;
border-left: 5px solid black;
}
.home-floor-window {
display: inline-block;
box-sizing: border-box;
width: 50px;
height: 70px;
border: 3px solid blue;
margin: 15px 40px;
}
.home-groundfloor {
height: 100px;
border-right: 5px solid black;
border-left: 5px solid black;
border-bottom: 5px solid black;
}
.home-groundfloor-door {
float: right;
box-sizing: border-box;
width: 60px;
height: 90px;
border: 3px solid red;
margin: 10px 30px 0 0;
}
.controller {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>House builder</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0-rc.0/angular-sanitize.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="houseBuilder" ng-controller="myCtrl">
<div class="home">
<div class="home-roof"></div>
<div ng-repeat="n in arr" ng-bind-html="floor"></div>
<div class="home-groundfloor">
<div class="home-groundfloor-door"></div>
</div>
</div>
<div class="controller">
<input type="range" min="1" max="10" ng-model="numberFloor">
<input type="text" value="{{numberFloor}}">
</div>
</body>
</html>
What is the easiest way in angular to bind value of ng-model to length of an array so that length changes when ng-model changes?

The simplest way is to just you array.length attribute like so:
<input type="range" min="0" max="100" ng-model="array.length">
Here's a working example:
angular.module('test', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-init="array = []">
<input type="range" min="0" max="100" ng-model="array.length">
<p>{{array|json}}</p>
</form>

ONSEN UI: Can I use same header or menu and footer for all the html files? If yes HOW?

I am developing an app using onsen ui and angular js. Lets say I have 3 html files(physical) not the ons-template one on the same page. How can I make a header of menu that will appear on all the three pages.

Here is an example with ons-navigator and ons-toolbar. You can add a footer in the same way, although a little css adjustment will be needed.
ons.bootstrap()
.back-button-icon{
vertical-align: top;
background-color: transparent;
height: 44px;
line-height: 44px;
font-size: 36px;
margin-left: 8px;
margin-right: 2px;
width: 16px;
display: inline-block;
padding-top: 1px;
}
.back-button-text{
vertical-align: top;
display: inline-block;
line-height: 44px;
height: 44px;
}
ons-toolbar ~ ons-navigator .page__content{
margin-top: 44px;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-toolbar>
<div class="left">
<div class="toolbar-button" ng-show="navi.getPages().length > 1" ng-click="navi.popPage()">
<i class="ion-ios-arrow-back back-button-icon"></i><span class="back-button-text">Back</span>
</div>
</div>
<div class="center">Title</div>
<div class="right"></div>
</ons-toolbar>
<ons-navigator var="navi" page="page1.html"></ons-navigator>
<script type="text/ng-template" id="page1.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page1
<ons-button onclick="navi.pushPage('page2.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page2.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page2
<ons-button onclick="navi.pushPage('page3.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page3.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page3
</div>
</ons-page>
</script>

Fixed header and footer moving on menu open

I'm having an issue in this Angular app where my footer and header (on mobile only) jump down 105px when opening the sidebar menu. The app is hosted here, and you can see what happens when opened on mobile. I can't reproduce it in Chrome on the desktop, however.
Please use these credentials and click any channel, and then pull out the sidebar menu to see the issue:
username: test#test.com
password: test
index.html:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Slackchat</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel='stylesheet' href='bower_components/semantic-ui/dist/semantic.css' />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,700,300,100' rel='stylesheet' type='text/css'>
</head>
<body ng-app="slackerchat">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="ui right vertical inverted labeled icon sidebar menu" id="sidebar">
<a class="item" href="#/">
<i class="home icon"></i>
Home
</a>
<a class="item" href="#/login">
<i class="sign in icon large"></i>
Sign in
</a>
<a class="item" href="#/register">
<i class="add user icon"></i>
Register
</a>
<a class="item" ng-click="logout()">
<i class="sign out icon large"></i>
Sign out
</a>
</div>
<div class="pusher">
<div class="ui padded grid">
<div class="sixteen wide column row button raised" id="header-desktop">
<div class="three wide column" id="logo-column">
<img class="ui medium image left floated" id="logo-home" src="images/logo.svg" alt="slackerchat">
<img class="ui medium image left floated" id="logo-hash" src="images/logo-hash.svg" alt="slackerchat">
<div class="item" id="channel-dropdown">
<div class="ui top right pointing dropdown">
<div class="header">
<h1 style="color:black;">{{ messagesCtrl.channelName }}</h1>
</div>
<div class="menu">
<div class="item"><i class="user icon"></i>Profile</div>
<div class="item"><i class="users icon"></i>Followers</div>
<div class="item"><i class="unhide icon"></i>Following</div>
<div class="item"><i class="setting icon"></i>Settings</div>
</div>
</div>
</div>
</div>
<div class="thirteen wide column" id="menu-container">
<div class="ui list">
<div class="ui large icon toggle button right floated">
<i class="content icon big"></i>
</div>
</div>
</div>-->
</div>
</div>
<ui-view></ui-view>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-md5/angular-md5.js"></script>
<script src="bower_components/semantic-ui/dist/semantic.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="app.js"></script>
<script src="auth/auth.controller.js"></script>
<script src="auth/auth.service.js"></script>
<script src="users/users.service.js"></script>
<script src="users/profile.controller.js"></script>
<script src="channels/channels.controller.js"></script>
<script src="channels/channels.service.js"></script>
<script src="channels/messages.service.js"></script>
<script src="channels/messages.controller.js"></script>
<!-- endbuild -->
<!-- SEMANTIC MODAL DROPDOWN -->
<script>
$('.dropdown').dropdown({
// you can use any ui transition
transition: 'drop'
});
</script>
<script>
$('.right.sidebar').first()
.sidebar('setting', 'transition', 'uncover')
.sidebar('attach events', '.toggle.button')
.sidebar('attach events', '.menu .item')
;
</script>
</body>
</html>
messages.html
<div class="ui padded grid">
<div class="sixteen wide column row button raised" id="header-mobile">
<div class="ten wide column" id="remove-padding-left">
<img class="ui medium image left floated" id="logo-hash" src="images/logo-hash.svg" alt="slackerchat">
<div class="item" id="channel-dropdown">
<div class="ui dropdown">
<div class="header">
<h1>{{ messagesCtrl.channelName }} <i class="caret down icon"></i></h1>
</div>
<div class="menu">
<div class="header">
<p>Search Channels</p>
</div>
<div class="ui fluid left icon input">
<i class="search icon"></i>
<input type="text" name="search" placeholder="Search...">
</div>
<div class="header">
<p>Available Channels</p>
</div>
<div class="item" ng-repeat="channel in channelsCtrl.channels">
<a ui-sref="channels.messages({channelId: channel.$id})" ui-sref-active="selected"><img class="ui image left floated" id="hash" src="images/hash.svg" alt="hashtag">{{ channel.name }}</a>
</div>
<div class="item" id="create-channel"><a ui-sref="channels.create"><i class="plus icon"></i>create a new channel</a></div>
</div>
</div>
</div>
</div>
<div class="six wide column" id="menu-container">
<div class="ui list">
<!-- SIDEBAR -->
<div class="ui large icon toggle button right floated">
<i class="content icon big"></i>
</div>
</div>
</div>
</div>
</div>
<div class="header" id="messages-channel-active">
<h1>{{ messagesCtrl.channelName }}</h1>
</div>
<div class="message-wrap" ng-repeat="message in messagesCtrl.messages">
<img class="user-pic" ng-src="{{ channelsCtrl.getGravatar(message.uid) }}" />
<div class="message-info">
<div class="user-name">
{{ channelsCtrl.getDisplayName(message.uid) }}
<span class="timestamp">{{ message.timestamp | date:'short' }}</span>
</div>
<div class="message">
{{ message.body }}
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<div class="avatar-container">
<a class="avatar">
<img src="/images/avatar/elliot.jpg">
</a>
</div>
<div class="ui card">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<a class="author">toddler</a>
<div class="metadata">
<div class="date">11:53am</div>
<div class="right floated rating">
<i class="star icon"></i>
5 Faves
</div>
</div>
<div class="text">
Hey, have you seen my latest video at https://www.youtube.com/watch?v=kILY0L9oTc0?
</div>
<a href="https://www.youtube.com/watch?v=kILY0L9oTc0" target="_blank">
<img src="/images/surfing.jpg">
</a>
<div class="content">
<a class="header" href="https://www.youtube.com/watch?v=kILY0L9oTc0" target="_blank">Surfing in Hawaii</a>
<div class="meta">
<a>Last Watched 1 minute ago</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="avatar-container">
<a class="avatar">
<img src="/images/avatar/helen.jpg">
</a>
</div>
<div class="ui card">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<a class="author">Miss Priss</a>
<div class="metadata">
<div class="date">11:55am</div>
<div class="right floated rating">
<i class="star icon"></i>
2 Faves
</div>
</div>
<div class="text">
No, actually I haven't. But I'm checking it out now!
</div>
</div>
</div>
</div>
<div class="comment">
<div class="avatar-container">
<a class="avatar">
<img src="/images/avatar/joe.jpg">
</a>
</div>
<div class="ui card">
<div class="content">
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<a class="author">Big Boba</a>
<div class="metadata">
<div class="date">11:57am</div>
<div class="right floated rating">
<i class="star icon"></i>
3 Faves
</div>
</div>
<div class="text">
Wow, it looks like you really bit the dust on that last wave. I'd love to learn, but I'll stick to the small waves here in Newport Beach.
</div>
</div>
</div>
</div>
</div>
<div class="form-wrapper">
<form class="message-form" ng-submit="messagesCtrl.sendMessage()">
<div class="huge ui fluid left icon input">
<input type="text" id="input-message" ng-model="messagesCtrl.message" placeholder="Write a message..." class="form-control">
<button class="huge ui circular icon button" id="search-button-circle" type="submit">
<i class="white send icon"></i>
</button>
<i class="write icon"></i>
</div>
</form>
</div>
<!-- SEMANTIC MODAL DROPDOWN -->
<script>
$('.dropdown').dropdown({
// you can use any ui transition
transition: 'drop'
});
</script>
<script>
$('.right.sidebar').first()
.sidebar('setting', 'transition', 'uncover')
.sidebar('attach events', '.toggle.button')
.sidebar('attach events', '.menu .item')
;
</script>
main.css
body {
padding: 0;
background: #eef2f5;
}
*:focus {
outline: 0 !important;
}
a, span, p, h1, h2, h3, h4, h5, body {font-family: 'Roboto', Arial, sans-serif !important;}
.page-wrapper {
max-width:550px;
margin-right: auto;
margin-left: auto;
padding:15px;
}
.page-wrapper .logo-img {
margin-top:-10px;
}
.main {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
.sidebar {
display:inline-block;
width:20%;
vertical-align: top;
height:100%;
background:#393f4d;
padding-bottom:100px;
float:left;
min-height: 1600px;
}
.sidebar .slack-name {
background:#313743;
padding:15px 0px 15px 15px;
border-bottom: 3px solid #2c313c;
}
.sidebar .slack-name h2{
color:#fff;
font-size:22px;
font-weight:bold;
margin-top:0px;
margin-bottom:0px;
}
.sidebar .room-list {
margin-top:20px;
background:#4d394b;
}
.sidebar .room-list .room a{
display:block;
color:rgba(255,255,255,0.6);
padding:3px 0px 3px 15px;
width:90%;
font-weight:300;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.sidebar .room-list .room a:hover{
text-decoration: none;
background:#3E313C;
}
.sidebar .room-list .room a.selected{
background:#4c9689;
color:#fff;
text-decoration: none !important;
}
.sidebar .room-list .room.create {
font-style: italic;
}
.sidebar .room-list .list-head {
margin-top:10px;
color: #a5adbe;
font-weight: bold;
margin-left: 10px;
text-transform: uppercase;
}
.sidebar .my-info {
position:fixed;
bottom:0;
padding:20px 15px;
background:#313743;
width:20%;
border-top: 3px solid #2c313c;
}
.sidebar .my-info .user-pic {
display: inline-block;
vertical-align: top;
width:44px;
height:44px;
border-radius:4px;
}
.sidebar .my-info .user-info {
padding-left:5px;
display: inline-block;
vertical-align: top;
}
.sidebar .my-info .user-info .user-name {
color:#fff;
font-size:16px;
font-weight:bold;
}
.sidebar .my-info .user-info .options {
color:#999;
font-size:12px;
}
.sidebar .my-info .user-info .options a{
color:#999;
font-size:12px;
}
.sidebar .presence {
border-radius: 50%;
display: inline-block;
width: 10px;
height: 10px;
background: #ab9ba9;
vertical-align: middle;
}
.sidebar .presence.online {
background: #99d04a;
}
.message-pane {
display:inline-block;
vertical-align: top;
height:100%;
width:80%;
padding: 0;
background: #eef2f5 !important;
float: right;
min-height: 1600px;
}
.message-pane .header {
top: 0;
width: 100%;
z-index: 2;
}
.message-pane .header h1 {
padding: 17px 0 0 0;
margin-top:0px;
margin-bottom:0px;
font-size:24px;
color:#393f4d;
font-weight:900;
}
.message-pane .message-form {
padding: 0;
width: 100%;
}
.form-wrapper {
position: fixed;
display: block;
width: 80%;
bottom: 0;
overflow: hidden;
background: #eef2f5;
padding: 17px 0px 7px 20px;
box-shadow: 0px -2px 5px 0px rgba(0,0,0,.26);
z-index: 100;
}
.message-pane .message-wrap {
margin: 15px 15px 15px 20px;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 1.3px 4px 0 rgba(0, 0, 0, 0.26);
padding: 15px;
background: #FFF;
border-radius: .2rem;
}
.message-pane .message-wrap .user-pic {
width:36px;
height:36px;
border-radius:4px;
display: inline-block;
vertical-align: top;
}
.message-pane .message-wrap .message-info {
display: inline-block;
vertical-align: top;
padding-left:5px;
}
.message-pane .message-wrap .message-info .user-name {
color:#555459;
font-weight:900;
}
.message-pane .message-wrap .message-info .user-name span{
color:#ccc;
font-weight: normal;
font-size:10px;
}
.ui.comments .comment a.author {
font-size: 1.2em;
}
.avatar-container {
width: 8%;
}
/* ------------SEMANTIC FONTS------------ */
#font-face {
font-family: 'Icons';
src: url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.eot");
src: url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.woff2") format('woff'), url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.woff") format('woff'), url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.ttf") format('truetype'), url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/themes/default/assets/fonts/icons.svg#icons") format('svg');
font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
}
/* -------------MATERIAL DESIGN CUSTOM STYLES--------------- */
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 4px 2px 5px 0 rgba(0, 0, 0, 0.26);
}
/* -----------HEADER-------------- */
#header-desktop {
position: fixed !important;
display: inline-block;
top: 0;
width: 100%;
background: #f8f9fb;
height: 65px;
z-index: 100;
}
.page-wrapper, .main {
position: relative;
top: 65px;
}
#logo-home, #logo-hash {
padding-top: 0em;
max-width: 180px;
max-height: 160px;
}
#logo-hash {
visibility: hidden;
}
#channel-dropdown {
visibility: hidden;
}
#logo-column {
height: 50px;
}
/* ----------SIDEBAR----------- */
.channel {
padding: 2px 0px;
}
.channel.ng-scope a {
color: #a5adbe;
text-decoration: none;
}
.channel.create a {
color: #a5adbe;
}
.channel-list {
padding: 15px;
font-size: 1.1em;
}
.list-head {
color: #a5adbe;
text-transform: uppercase;
font-weight: bold;
padding-bottom: 8px;
}
a.ng-binding.selected {
color: #FFF;
font-weight: bold;
}
.channel.create {
padding-bottom: 40px;
padding-top: 5px;
border-top: 3px solid #2c313c;
margin-top: 5px;
}
/* --------------MESSAGE---------------- */
input#input-message, input[type="text"] {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
margin-bottom: 7px;
}
#search-button-circle {
border-radius: 50%;
color: #fff;
overflow: hidden;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
background-color: #684d5e;
margin: 0 15px 7px 15px;
z-index: 998;
height: 50px;
width: 50px;
}
.ui.card {
width: 92%;
float: left;
margin-left: 30px;
margin-right: 20px;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
}
.ui.comments .comment .avatar img {
float: left;
margin-top: 11px;
margin-left: 20px;
margin-right: 10px;
}
.ui.comments {
margin: 0;
max-width: 100%;
}
.ui.comments img {
max-width: 100%;
max-height: 100%;
margin: 8px 0 12px 0;
}
/* -------------DROPDOWN--------------- */
.item a {
color: #684d5e;
line-height: 1.2em;
font-size: 1.1em;
}
.item a:hover {
color: #684d5e;
line-height: 1.2em;
}
.item a.selected {
color: #684d5e;
font-weight: bold;
font-size: 1.1em;
line-height: 1.2em;
}
#hash {
max-width: 18px;
max-height: 18px;
margin-right: 3px;
}
.menu {
width: 110%;
}
i.small.chevron.down.icon {
vertical-align: middle;
padding-bottom: 1.3em;
}
i.white.send.icon:before {
margin-left: -5px;
}
.ui.circular.button > .icon {
width: 1em;
vertical-align: baseline;
height: 1em;
}
#create-channel {
background: #F3F3F3;
}
#create-channel:hover {
background: #393f4d;
}
#create-channel a {
color: #684d5e;
}
#create-channel a:hover {
color: #FFF;
}
body.pushable > .pusher {
/*background: #393f4d !important;*/
}
#header-mobile {display: none;}
#messages-channel-active {margin-left: 18px;}
/* --------------SIDE POPOUT MENU------------------- */
.ui.icon.toggle.button.right.floated {
background: none;
padding-top: .1em;
color: #684d5e !important;
}
.ui.icon.toggle.button.right.floated:hover, .ui.icon.toggle.button.right.floated:active {
color: #393f4d !important;
outline: 0 !important;
box-shadow: none !important;
}
.pushable > .pusher {
overflow: visible;
}
/* --------------MEDIA QUERIES------------- */
#media only screen and (min-width: 1000px) and (max-width: 1370px) {
.ui.card {
width: 90%;
margin-right: 10px;
}
}
#media only screen and (max-width: 999px) {
.ui.card {
width: 89%;
margin-right: 10px;
}
#header-desktop, #logo-column {
display: none;
}
.sidebar {
display: none;
}
.message-pane, .form-wrapper {
width: 100%;
}
.message-pane .message-wrap {
margin: 15px 20px 15px 20px;
}
#logo-hash {
visibility: visible;
max-width: 45px;
max-height: 45px;
padding-top: 3px;
}
#logo-home {
display: none;
}
#channel-dropdown {
visibility: visible;
}
#header-mobile {
position: fixed !important;
display: inline-block;
padding: 6px 0 0 0;
height: 60px;
top: 0;
width: 100%;
background: #f8f9fb;
z-index: 100;
}
.button.raised {
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.2);
}
#messages-channel-active {display: none;}
.main {
top: 60px;
}
.ui.dropdown > .menu {
width: 145%;
}
.header p {margin-left: 5px;}
.ui.icon.toggle.button.right.floated {
padding-top: .5em;
}
.message-pane .header h1 {
padding: 7px 0 0 0;
}
}
#media only screen and (max-width: 768px) {
.ui.card {
width: 80%;
margin-right: 0px;
}
}

You should put your main scrollable content within <md-content></md-content> and perhaps add md-scroll-y as an attribute to prevent x scrolling. For your app you'd want to surround your chat area in this so only it scrolls instead of the whole page scrolling.
Here is a demo of using md-content
https://material.angularjs.org/latest/#/demo/material.components.content

bootstrap dropdown caret breakes in safari

I`m trying to do ellipsis on the dropdown from angular ui bootstrap and the caret keeps breaking down either on safari, chrome or firefox. Fixing one will break another.
I've made a plunker with it and while it works in chrome, it will break in safari :(
Html
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script data-require="angular-ui-bootstrap#0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<div class="btn-red">
<div class="btn-group" dropdown>
<div class="btn btn-primary dropdown-toggle">
<span class="title">
{{ data ? data : noTitle }}
</span>
<span ng-if="data" class="caret"></span></div>
<ul class="dropdown-menu" role="menu">
<li>test</li>
</ul>
</div>
</div>
</body>
</html>
JS
var testApp = angular.module("testApp", []);
testApp.controller('testController', [ '$scope', function($scope) {
$scope.data = 'titie';
}]);
CSS
div.btn-red {
height: 40px;
line-height: 40px;
width: 100%;
padding: 0px;
border: 0px;
white-space: nowrap;
}
div.btn-red div.btn-group div.btn-primary {
width: 100%;
height: 40px;
padding: 0px;
line-height: 40px;
background-color: #e16a60;
border: 0px;
}
div.btn-red div.btn-group div.btn-primary span.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90%;
display: inline-block;
}
div.btn-red div.btn-group div.btn-primary span.caret {
height: 100%;
}
div.btn-red div.btn-group ul.dropdown-menu {
float: right;
width: 100%;
padding: 0px;
border: 0px;
}
div.btn-red div.btn-group ul.dropdown-menu li {
width: 100%;
color: #000000;
padding-left: 5px;
float: right;
border-bottom: 1px solid #cccccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.btn-red div.btn-group ul.dropdown-menu > li: hover {
background-color: #cccccc;
}
div.btn-red div.btn-group ul.dropdown-menu li.current {
color: #ffffff;
background-color: #e16a60;
}
div.btn-red div.btn-group ul.dropdown-menu li i {
font-size: 12px;
}
You can find the plunker here:
http://plnkr.co/edit/ulBVDFl2tWBUOp9bWiF0?p=preview
If anyone has any ideas on how to fix that would be awesome.
Thanks.

Resources