I'm building a responsive email message, and it's rendering well in every email client except for Gmail for iPhone 6 and 6+, using iOS 10. The only thing that's going wrong is that the registered trademark and copyright symbols in the message are appearing many font sizes larger and in a blue color, when they're supposed to be gray (#646464), 9px high, with a vertical-align property of 3px.
EMAIL_PRTNR_NAME in the code snippet represents a JavaScript variable which pulls in a brand name with a registered trademark in it.
I'm using the a[x-apple-data-detectors] style in the CSS, although the registered trademarks and copyright symbols are not linked to anything.
Has this happened to anyone before? Any ideas on how to fix?
Thank you in advance!
enlarged, blue registered trademark symbol
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30"> </td>
<td width="24" class="mobileHide"> </td>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">
<div style="font-family:Helvetica, Arial, sans-serif; height:6px; font-size:6px; line-height:6px;">
</div>
<table width="353" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">FULL_NAME</span><br></td>
</tr>
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">EMAIL_PRTNR_NAME</span><br></td>
</tr>
</table>
<div style="height:6px; font-size:6px; line-height:6px;">
</div>
</td>
<td width="30"> </td>
</tr>
</table>
©
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
®
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
™
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
I am experiencing a similar issue where google is replacing it with their 'goomoji' that is rendering with incorrect styling. I believe this is a bug in gmail and will fix itself.
To avoid Enlarged registered symbol in gmail and Outlook use this code.
©
<!--[if gte mso 9]>© <![endif]--> <!--[if !mso]><!--> Ⓒ<!--<![endif]-->
®
<!--[if gte mso 9]><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">®</span> <![endif]--><!--[if !mso]><!--><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">Ⓡ</span><!--<![endif]-->
I think Google fixed it - have been tested and looks OK for ® and ™
I'm trying to achieve a colored background for my table. I want that when it is on its responsive form, the first lines that are selected in the picture (the lines that start with this word "Caracteristiques") have a specific background color to structure my table, is this possible?
body{font-family:'Varela Round';}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
You can do what you are trying to do with :pseudo, I have added just two rules
body {
font-family: 'Varela Round';
}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
/**** Added CSS Rules ****/
tr:nth-child(1n+1) td:first-child {
background: red;
}
tr:nth-child(1n+1) td:first-child:before {
background: red;
}
/**** End of Added CSS Rules ****/
.responsive-table-line td:before {
content: attr(data-title);
}
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display: none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align: right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
text-align: left;
background-color: #f8f8f8;
padding: 2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
Hope this helps :)
I want to create a tooltip as shown in pic. Value in title tag is coming from controller.
This is my table code:
<table border="1" cellpadding="10">
<tbody style="white-space: nowrap;">
<tr ng-repeat="row in rows">
<td style="width: 2%;">
<input type="checkbox"
ng-model="tableSelection[$index]"
style="margin-left: 10px;">
</td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
ng-repeat="col in input_columns"
droppable="dropable"
drop-fn="drop"
drop-index="$index"
drop-data="col"
title=""
ng-click="openDialog($event,$index)"
tempValue=""><enter data></td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;"
ng-repeat="col in output_columns"
droppable="dropable"
drop-fn="dropOutput"
drop-index="$index"
drop-data="col"
title=""
ng-click="openDialogOutputConst($event,$index)"><enter data></td>
</tr>
</tbody>
</table>
Can anyone help me how to provide a tooltip like this.
Something like this?
td {
position: relative;
}
td:hover:before {
content: attr(data-title);
position: absolute;
background-color: yellow;
top: 100%;
width: 200px;
white-space: normal;
word-spacing: 200px;
}
<table border="1" cellpadding="10">
<tbody style="white-space: nowrap;">
<tr ng-repeat="row in rows">
<td style="width: 2%;">
<input type="checkbox" ng-model="tableSelection[$index]" style="margin-left: 10px;">
</td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in input_columns" droppable="dropable" drop-fn="drop" drop-index="$index" drop-data="col" data-title="Idaho Illinois Indiana Iowa Kansas Missouri Nebraska Ohio"
ng-click="openDialog($event,$index)" tempValue=""><enter data></td>
<td style="font-size: smaller; width: 27%; color: gray; white-space: nowrap;" ng-repeat="col in output_columns" droppable="dropable" drop-fn="dropOutput" drop-index="$index" drop-data="col" data-title="Some text here" ng-click="openDialogOutputConst($event,$index)"><enter data></td>
</tr>
</tbody>
</table>
You could work with a :before :afterand do some manual positioning.
Using the :before as the stroke and the :after as the tooltip. You could create something like this.
body {
margin-top: 100px;
}
.item {
position: relative;
display: inline-block;
padding: 20px;
background: #fff;
border: 2px solid crimson;
// the stroke
// and the tooltip
// hide them by default
&:before,
&:after {
content: '';
position: absolute;
display: none;
}
// the stroke
&:before {
width: 100px;
height: 2px;
background: crimson;
right: -100px;
transform-origin: 0 0;
transform: rotate(-20deg);
}
// the tooltip itself
&:after {
content: attr(title);
color: #fff;
top: -30px;
right: -250px;
width: 150px;
padding: 5px;
background: #000;
}
// when hover the item,
// display before and after
&:hover {
&:before,
&:after {
display: inline-block;
}
}
}
https://jsfiddle.net/808443bt/
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`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.