Page pushed to the left and title section pushing the width of the page. I'm new to web Dev, So please let me know where I made the mistake and how to correct it. Full CSS and HTML codes included. Bootstrap version 4. This is a personal blog, my am was to make each post page responsive the same way the homepage made responsive. I can't figure out how to do it. Red arrows show where it pushed to the right
https://github.com/GreshanBovithanthrige/Personal-Blog.git
Git Hub Repo link
html {
height: 100%;
}
body {
font-family: "Montserrat";
color: #000;
min-height: 100%;
display: flex;
flex-direction: column;
}
#title {
background-color: #082032;
color: #fff;
text-align: center;
}
.gb-img {
position: relative;
padding: 5% 0%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
/* display: flex; */
}
.heading {
text-align: center;
margin: auto;
}
.container-fluid {
padding: 3% 15%;
}
h3 {
font-family: 'Montserrat';
font-weight: bold;
color: #000;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
}
p {
color: #40514E;
}
/* Navigation Bar */
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: "Alumni Sans";
font-weight: 500;
font-size: 2.7rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 300;
}
/* Buttons */
.about-button {
margin: 2% 0% 5% 0%;
}
.card-button {
width: 180px;
margin: auto;
}
/* Features Secition */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.card {
background-color: #212529;
border-radius: .50rem;
}
.card-text {
color: #fff;
}
.card-title {
color: #fff;
}
.post-column {
padding-bottom: 5%;
}
/* Footer */
#footer {
padding: 7% 15%;
text-align: center;
background-color: #334756;
margin-top: auto;
}
.p-text {
color: #fff;
}
.sm-icon {
padding: 20px 10px;
}
/* About me page styles */
.about-page-p {
text-align: left;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 30%;
padding-right: 30%;
}
/* Posts Section */
/* Post 1 */
.post1 {
text-align: justify;
padding: 7% 15%;
}
.office-image {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3% 0%;
}
/* Post 2 */
.post2 {
text-align: justify;
padding: 7% 15%;
}
#media (min-width: 320px) and (max-width: 767px) {
/* .row {
position: relative;
} */
.container-fluid{
position: relative;
width: 100%;
}
.common{
margin: auto;
padding-left: 12%;
padding-bottom: 20px;
}
body{
padding:0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>GB</title>
<link rel="SHORTCUT ICON" href="images/GB.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark navbar">
<a class="navbar-brand" href="index.html">GB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-me.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Title -->
<!-- <div class="row"> -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-sm">
<h1>Hello.</h1>
<h2>I'm Greshan Bovithanthrige</h2>
<h4>A Sys Admin based in Sri Lanka</h4>
About me
</div>
<div class="col-sm row common">
<img src="images/GB.png" height="280" width="280">
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column">
<div class="card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">All of us in whatever context is tasked with getting more from less!</h5>
<p class="card-text">The energy behind writing this article came from an interview I had the privilege to watch recently.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/RAM.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Is it necessary to stress test your RAM/Memory?</h5>
<p class="card-text">The short answer is YES. You should. But, it really depends on the context.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<span style="color:#FFF;"><span /><i class="fab fa-facebook sm-icon"></i>
<a href="https://instagram.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-instagram sm-icon"></i><a />
<a href="https://twitter.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-twitter sm-icon"></i><a />
<span style="color:#FFF;"><span /><i class="fab fa-linkedin-in sm-icon"></i>
<span style="color:#FFF;"><span /><i class="fas fa-envelope-square sm-icon"></i>
<p class="p-text">Crafted by Greshan Bovithanthrige</p>
</footer>
</body>
</html>
I am trying to move the hamburger menu to the far right, so it looks better on mobile and aligin the ul, so it's also on the right.
I have added navbar-toggler-right to the navbar-toggler and have also added navbar-nav mr-auto to the ul, but while its on the right of the text, it's still not on the right and the links are aligned to the left for some reason. Any ideas?
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;}
.navbar-text { overflow-wrap: break-word;
}
}
span.text {
float: left;
margin-right: 30px;
}
span.text p{margin-top: 15px!important;}
.navbar-toggle .icon-bar{
margin-left: auto;
margin-top none !important; }
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
overflow-x: hidden !important;
}
}
#media screen and (max-width: 600px) {
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 600px) {
img.content{ width:80%;
border:#01009C 1px solid; display: block; margin: 0 auto; vertical-align:middle !important; }
}
}
.container{ word-wrap: break-word!important; padding:0px; background:orangered;}
.topnav {
overflow: hidden;
margin-bottom: 10px;
}
.topnav a.navbar-brand{
display:none;
vertical-align: top;
}
.topnav .nav-link i{
margin-top:5px;
}
.topnav .nav-link img{
margin-top:5px;
}
.navbar-header img{
width:100px;
}
.topnav a {
font-family:MuseoSans-500;
display: inline-block;
text-decoration: none;
font-size: 20px;
font-weight: normal;
font-style: normal;
}
/*
h2 { font-size:25px !important; font-family: MuseoSans-100 !important;
font-weight: normal;
font-style: normal;
clear:both; color: orangered;
} */
.active {
color: white;
}
.topnav .icon {
display: none;
}
.navbar-text{ white-space: normal; font-size:40px; color:orangered;word-wrap: break-word!important;}
img.content{
border:#01009C 1px solid; display: block; margin: 0 auto; vertical-align:middle !important; }
.container{background:white;overflow:hidden!important;}
.img-fluid {
max-width: 100%;
height: auto;
}
#media (max-width:768px){
.topnav a{
font-size:18px !important;
}
img { vertical-align: top!important;}
.topnav .nav-link img, .topnav .nav-link i {margin:-4 ; width:20px;}
.navbar-header h1{
font-size:35px!important; word-wrap: break-word!important;
}
h2{font-size:25px!important;}
html{ overflow-x: hidden;}
}
.navbar
#media(max-width:540px){
.topnav a.navbar-brand{
display: block;
transform: translateX(43%);
}
.form-inline .form-control {
display: inline-block !important;
width: auto!important
}
.nav-item a {text-align:left!important;}
.topnav .nav-link i{
margin-top:0;
}
.topnav .nav-link img{
margin-top:0;
}
.link1{
display:none;
}
.navbar-header img{
width:100px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar justify-content-center">
<div class="navbar-brand navbar-header">
<img class="img-fluid" src="includes/om.svg" width="100" >
<h1 class="navbar-text primary">Grampian Yoga Association</h1>
</div>
</nav>
<body>
<nav class="navbar navbar-expand-lg topnav " id="myTopnav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="material-icons">
menu
</i></i></span>
<span class="text"><p>Toggle navigation</p></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-default" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/summerclasses.php">Summer Classes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/teachers.php">Classes and Teachers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/seminars.php">Seminars</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/com.php">Committee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/accounts.php">Accounts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/about.php">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/membership.php">Membership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo $sitepath; ?>/maintain.php">Links</a>
</li>
</div>
</nav>
Try adding right: 15px; and position: absolute; to navbar-toggler-icon to move the menu to the right.
.navbar-toggler-icon {
right: 15px;
position: absolute;
}
I have a react component where I need to have multiple carousels that are connected. I am trying to create two swiper instance in a react component and control the slide of one on the slide of another.
I need help in creating multiple swiper instances and use in React.
And control one with the movement of the other.
API / Controller
Use API controller (Not a lot of docs/examples out there - For specific answer you should add full-code-example):
swiper API:
https://swiperjs.com/swiper-api#controller
Github: Github issue: How do I get two swiper instances to control each other? #1738
Example:
let sliderOne = new Swiper(".slider-one", {
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
let sliderTwo = new Swiper(".slider-two", {
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
sliderOne.controller.control = sliderTwo;
sliderTwo.controller.control = sliderOne;
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
.slider-two .swiper-pagination-bullet-active{
background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container slider-one">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container slider-two">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
thumbs
Two carousels click/swipe A change B - Very Easy to control/sync with thumbs:
In addition to Controller component Swiper comes with Thumbs component
that is designed to work with additional thumbs swiper in a more
correct way than Controller which is used for syncing two swipers.
https://swiperjs.com/api/#thumbs
Demo:
https://swiperjs.com/demos/300-thumbs-gallery.html
Demo Source code:
https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html
I have the following directive, which resizes the navbar on scroll.
This works fine, but when I hover the mouse over the navbar, I want to to remove/add a class depending on the offset. However, this doesn't seem to be happening with the code below. How do I fix it?
angular.module('marquesslondonApp')
.directive('navbarShrink', function ($window) {
return {
restrict: 'A',
scope: {
offset: '#',
scrollClass: '#'
},
link: function (scope, element) {
angular.element($window).bind('scroll', function () {
if (this.pageYOffset >= parseInt(scope.offset)) {
element.addClass(scope.scrollClass);
} else {
element.removeClass(scope.scrollClass);
}
});
angular.element.on('mouseenter', function () {
if (this.pageYOffset >= parseInt(scope.offset)) {
element.removeClass(scope.scrollClass);
}
});
angular.element.on('mouseleave', function () {
if (this.pageYOffset >= parseInt(scope.offset)) {
element.addClass(scope.scrollClass);
}
});
}
};
});
This is the element I am targeting:
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="images/logo.png">
</a>
</div>
<div style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>Process</li>
<li>Our Look</li>
</ul>
</li>
<li><a ng-href="/lifestyle">LIFESTYLE</a></li>
<li><a ng-href="/story">STORY</a></li>
<li><a ng-href="/contact">GET IN TOUCH</a></li>
</ul>
</div>
</div>
</div>
</div>
My CSS:
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 6.5em;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 6em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>.active, {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 10.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand {
position: absolute;
display: block;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
In your directive link function, you need to set the mouseenter and mouseleave event listeners on element, not angular.element.
So replace angular.element.on('mouseenter', ...) and angular.element.on('mouseleave', ...) with element.on('mouseenter', ...) and element.on('mouseleave', ...).
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