I have a label which return different names (many) in one of my divs, here is how it looks in html view.
<div class="customerDisplayFlex">
<div class="" *ngFor="let cust of customers">
<label class="dataLabel">
<input type="radio"
name="user-radio"
[value]="customer"
[ngModel]="currentCustomerContext"
(click)="onCustomerContextchange(customer)"
class="dataLabel__input" />
<span class="customer__label">{{customer.firstName | titleCase}} {{ customer.lastName | titleCase}}</span>
</label>
</div>
</div>
here is css of the view
.dataLabel{
color: green;
border-right: 2px solid grey;
}
.dataLabel:last-child{
border-right: none;
}
I even tried to use sass:
.dataLabel{
color: green;
border-right: 2px solid grey;
&:last-child{
border-right: none;
}
}
in a strange way this does not work what am I doing wrong here? can some one please help? thanks
You don't want :last-child, you want :last-of-type:
.dataLabel {
color: green;
border-right: 2px solid grey;
}
.dataLabel:last-of-type {
border-right: none;
}
<div class="customerDisplayFlex">
<div class="" *ngFor="let cust of customers">
<label class="dataLabel">Label 1</label>
<label class="dataLabel">Label 2</label>
<label class="dataLabel">Label 3</label>
</div>
</div>
⋅
⋅
⋅
Then, you can even enhance the code using the :not selector, like this:
.dataLabel {
color: green;
}
.dataLabel:not(:last-of-type) {
border-right: 2px solid grey;
}
<div class="customerDisplayFlex">
<div class="" *ngFor="let cust of customers">
<label class="dataLabel">Label 1</label>
<label class="dataLabel">Label 2</label>
<label class="dataLabel">Label 3</label>
</div>
</div>
Hope it helps.
try this
.dataLabel span:last-child{
border-right: none;
}
Is it really the last child in its container? (not only the last label?). (Usually there would follow an input tag or similar)
If it's the last label tag, you can use :last-of-type instead of :last-child
ADDITION after comments and after more code has been added to the question:
If all .customerDisplayFlex are in still another container which contains nothing else afterwards, this should work:
.customerDisplayFlex:last-child label { border-right: none; }
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>
I am developing an ionic app wherein I have following requirement:
On clicking Start button the buttons starts glowing in random order for few predefined milliseconds and after it stops user is supposed to click the buttons in order they blinked within next 3 seconds. If he succeeds then Level 1 is completed.
So far, I simply have html buttons with a css that makes button glow as seen in the attached screenshot. How can I implement some method in my controller which will trigger glowing effect and handle all these time intervals? $interval seems like an option for the later one.
My css:
.large_button {
line-height: 10vh !important;
width: 50%;
}
.start-button {
line-height: 5vh !important;
width: 15%;
}
.button {
background-color: #004A7F;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
}
#-webkit-keyframes glowing1 {
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}
#-webkit-keyframes glowing2 {
0% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
50% { background-color: #7CFC00; -webkit-box-shadow: 0 0 40px #7CFC00; }
100% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
}
#-webkit-keyframes glowing3 {
0% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
50% { background-color: #FFFF00; -webkit-box-shadow: 0 0 40px #FFFF00; }
100% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
}
#-webkit-keyframes glowing4 {
0% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
50% { background-color: #1E90FF; -webkit-box-shadow: 0 0 40px #1E90FF; }
100% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
}
#button1 {
-webkit-animation: glowing1 1000ms infinite;
}
#button2 {
color: #000000;
-webkit-animation: glowing2 1000ms infinite;
}
#button3 {
color: #B8860B;
-webkit-animation: glowing3 1000ms infinite;
}
#button4 {
-webkit-animation: glowing4 1000ms infinite;
}
My HTML:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div padding align="center">
<h2>Please select a button!</h2>
</div>
<!-- First row of buttons -->
<div class="row">
<!-- First column -->
<div class="col col-50 col-offset-10" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button1">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button2">Click me!</button>
</div>
</div>
<div class="row">
<!-- First column -->
<div class="col col-50 col-offset-10" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button3">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" id="button4">Click me!</button>
</div>
</div>
<div align="center">
<button class="button button-bar button-dark start-button" ng-click="startAnimation()">Start</button>
</div>
<div align="left" style="padding-left:5cm;padding-top:1cm;">
<h1>Level 1
<i class="icon ion-android-checkbox"></i></h1>
</div>
</ion-content>
</ion-view>
Also can I optimize this code?
I used ng-class on all the buttons to apply css on-click of Start button. I used $interval directive to activate glowing for 2 milliseconds.
My HTML
<ion-view view-title="Dashboard">
<ion-content class="padding">
<div padding align="center">
<h2>Please select a button!</h2>
</div>
<!-- First row of buttons -->
<div class="row">
<!-- First column -->
<div class="col col-50 col-offset-10" style="padding-top:1cm;">
<button type="submit" class="button large_button" ng-class="{'button1': isActive}" id="button1">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" ng-class="{'button2': isActive}" id="button2">Click me!</button>
</div>
</div>
<div class="row">
<!-- First column -->
<div class="col col-50 col-offset-10" style="padding-top:1cm;">
<button type="submit" class="button large_button" ng-class="{'button3': isActive}" id="button3">Click me!</button>
</div>
<!-- First column -->
<div class="col col-50" style="padding-top:1cm;">
<button type="submit" class="button large_button" ng-class="{'button4': isActive}" id="button4">Click me!</button>
</div>
</div>
<div align="center">
<button class="button button-bar button-dark start-button" ng-click="start()" >Start</button>
</div>
<div align="left" style="padding-left:5cm;padding-top:1cm;">
<h1>Level 1
<i class="icon ion-android-checkbox"></i>
</h1>
</div>
</ion-content>
</ion-view>
My CSS
.large_button {
line-height: 10vh !important;
width: 50%;
}
.start-button {
line-height: 5vh !important;
width: 15%;
}
.button {
background-color: #004A7F;
-webkit-border-radius: 10px;
border-radius: 10px;
border: none;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 20px;
padding: 5px 10px;
text-align: center;
text-decoration: none;
}
#-webkit-keyframes glowing1 {
0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; }
100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; }
}
#-webkit-keyframes glowing2 {
0% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
50% { background-color: #7CFC00; -webkit-box-shadow: 0 0 40px #7CFC00; }
100% { background-color: #228B22; -webkit-box-shadow: 0 0 3px #228B22; }
}
#-webkit-keyframes glowing3 {
0% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
50% { background-color: #FFFF00; -webkit-box-shadow: 0 0 40px #FFFF00; }
100% { background-color: #CCCC00; -webkit-box-shadow: 0 0 3px #CCCC00; }
}
#-webkit-keyframes glowing4 {
0% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
50% { background-color: #1E90FF; -webkit-box-shadow: 0 0 40px #1E90FF; }
100% { background-color: #0000FF; -webkit-box-shadow: 0 0 3px #0000FF; }
}
.button1 {
-webkit-animation: glowing1 1000ms infinite;
}
.button2 {
color: #000000;
-webkit-animation: glowing2 1000ms infinite;
}
.button3 {
color: #B8860B;
-webkit-animation: glowing3 1000ms infinite;
}
.button4 {
-webkit-animation: glowing4 1000ms infinite;
}
Controller
.controller('DashCtrl', function($scope, $interval) {
$scope.Timer = null;
$scope.start = function(){
$scope.isActive = !$scope.isActive;
$scope.Timer = $interval(function(){
$scope.isActive = !$scope.isActive;
$interval.cancel($scope.Timer);
}, 2000);
}
})
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
I want to add custom data attribute to option tag.
For example:
<select>
<option data-image="url 1">Val 1</option>
<option data-image="url 2">Val 2</option>
<option data-image=" ... "> ... </option>
<option data-image="url N">Val N</option>
<select>
How can I do that?
That is impossible with the select directive (see the documentation). But you can easily make what you want with ngRepeat (see the documentation):
<select ng-model="choice">
<option ng-repeat="item in itemsList" data-image="{{item.url}}">{{item.label}}</option>
</select>
JSFiddle
have done a little modification to #Blackhole's answer.
Try this code pen:
CODEPEN
function loadCountryFlagCtrl($scope) {
$scope.countries = [
{
country_id: "SL",
name:"Sri Lanka", flag:"http://icons.iconarchive.com/icons/gosquared/flag/24/Sri-Lanka-flat-icon.png"
},{
country_id: "IND",
name:"India", flag:"http://icons.iconarchive.com/icons/gosquared/flag/24/Andorra-flat-icon.png"
}
];
}
And the HTML:
<div ng-controller="loadCountryFlagCtrl">
<div class="content">
<div class="header">
<form action="">
<div class="select_list" ng-class='{active:active}' ng-click="active=!active">
<span ng-style="{'background-image':'url('+countries.country_selected.flag+')'}">{{countries.country_selected.name}}</span>
<ul class="options">
<li class="select_list_option" ng-repeat="country in countries" ng-click="countries.country_selected=country" ng-style="{'background-image':'url('+country.flag+')'}">{{country.name}}</li>
</ul>
</div>
<br/>
<div>selected country:{{countries.country_selected.name}}</div>
</form>
</div>
</div>
and the CSS:
.select_list{
background-color: #fff;
border: 1px solid #b3b3b3;
cursor: pointer;
height: 21px;
line-height: 21px;
padding: 3px 5px;
position: relative;
vertical-align: middle;
width: 250px;
}
.select_list:after{
content:"▼";
position:absolute;
right:3px;
color:#b3b3b3;
}
.select_list > .options{
display:none;
position:absolute;
top:100%;
left:-1px;
width:100%;
border:1px solid #666;
padding:0;
margin:0;
}
.select_list.active > .options{
display:block;
}
.select_list > span, .select_list > .options li {
background-position: 5px center;
background-repeat: no-repeat;
padding-left: 30px;
list-style:none;
}
.select_list > .options li:hover {
background-color:#eee;
}
Hope this will be helpful for other programmers :)