I am trying to fit in a flex container with margins on both sides inside a grid container, but at the smallest viewport width the flex container leaks out. I have added borders to the respective divs to show where its leaking.
I have also added a demo to show my problem: https://codesandbox.io/s/9z49m3ny0p
If the demo isn't clear, take a look at these screenshots:
As you see from the above screenshots, that the red border stays within the viewport at all times but the blue bordered container spills out.
Home.js
<div id="rightContainer">
<div id="editorContainer">
<Notepad />
</div>
<div id="notesCardContainer">
<NoteCard />
<NoteCard />
</div>
</div>
Home.css
#editorContainer {
display: grid;
width: 100%;
position: relative;
border: 1px solid red;
}
#notesCardContainer {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
flex-direction: row;
justify-content: space-evenly;
padding-bottom: 60px;
}
And Notepad.js :
<div className="editorInnerContainer">
<div className="editorTop">
<input
type="text"
id="noteTitle"
value="Some Title"
disabled={true}
/>
<div id="tools">
<a href="" title="Edit this note">
<i className="fas fa-pencil-alt" />
</a>
<a href="" title="Delete this note">
<i className="fas fa-trash" />
</a>
<a href="" title="Download this note">
<i className="fas fa-download" />
</a>
<a href="" title="Share this note">
<i className="fas fa-share-square" />
</a>
</div>
</div>
</div>
Snippet from Notepad.css
.editorInnerContainer {
display: flex;
flex-direction: column;
background-color: var(--white-100);
padding: 20px;
margin-left: 20px;
margin-right: 20px;
margin-top: 50px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
border: 1px solid blue;
}
Take a look at this:
https://codesandbox.io/s/2v0o67w4kn
#noteTitle {
flex: 1;
height: 60px;
font-size: 18px;
line-height: 17px;
font-weight: 700;
border: none;
color: var(--black);
border: 2px solid sandybrown;
/* add width */
width: 100%;
max-width: 100%;
}
If you want to adjust the border issue as well, set the width to 100% - the border sizes added together via calc: https://codesandbox.io/s/l7rk0zop69
#noteTitle {
width: calc(100% - 6px);
max-width: calc(100% - 6px);
}
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 using Angularjs in order to display some images in the DOM, and apply some style to them (dim the background). It seems I am unable to apply ng-style to the img tag. What is the reason to that?
Fiddle here.
HTML:
<div ng-controller="MyController">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
<div class="rel">
<img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" ng-style="{'background':'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+post.link+')','background-size': 'cover'}">
<li class="del">button</li><li class="getLink">get link</li>
</div>
</div>
</div>
</div>
CSS:
.del{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
left: 0;
bottom: 0;
}
.getLink{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
right: 0;
bottom: 0;
}
.rel{
position: relative;
height: auto;
width: auto;
display: inline-block;
}
Please try the following:
HTML:
<div ng-controller="MyController">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
<div class="rel">
<div class="cover-img">
<img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));background-image: url('{{post.link}}');background-size: cover">
</div>
<li class="del">button</li><li class="getLink">get link</li>
</div>
</div>
CSS:
.del{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
left: 0;
bottom: 0;
}
.getLink{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
right: 0;
bottom: 0;
}
.rel{
position: relative;
height: auto;
width: auto;
display: inline-block;
}
.cover-img{
position:relative;
}
.cover-img:before{
content:'';
background: rgba(69, 71, 94, 0.53);
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
width:100%;
height:100%;
}
I don't think that how ng-style works. You can see example here and here.
Try this:
In html:
<img ng-style="yourStyle">
In controller:
$scope.yourStyle =
{
'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
'background-size': 'cover'
}
Hope this help.
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