I am working on chat box in angularjs and I want to add a scroll bar in the chat area so that Older chats can be easily seen by scrolling up...
<div class="chat active-chat" id="scroll" style="overflow-y: scroll;">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
I already added the overflow property and only the scroll bar is visible but its not scrolling...
Is there anything i should change on controller side.
Thanks in advance
Try this
<div class="chat active-chat" id="scroll" style="max-height: 200px;
overflow-y: auto;">
<div ng-repeat="c in activeConversations track by c.time| orderBy:'time':false" style="height:20px;">
<div class="bubble" ng-class="c.type">
{{c.message}}
<span class="user_message">{{c.time | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</div>
</div>
</div>
Related
I've been doing a lot of research on this and can't find a good solution. Basically, I have a panel in my app (Panel 2) and would like to collapse it to the left when the button is clicked and if the button gets clicked again then expand it to the right.
Here's my working Code: PLUNKER
<div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
<div fxFlex [fxShow]="explorerShow" style="background-color:white;">
<div (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
</div>
Panel 2
</div>
Use fxHide and [fxShow]="expand" on Panel 2 element
<div class="container">
<div class="content" fxLayout="row" fxFlexFill>
<div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
SIDEBAR
</div>
<div class="sec2" fxFlex="100%">
BODY
</div>
</div>
<button (click)="expand = !expand">Toggle Sidebar</button>
</div>
Here is a working stackblitz | your plunkr
UPDATE: Here is a stackblitz with animation
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)
I have angularJS ng-repeat i wanted to add scroll bar to the list items because it might have 4000 character in the field so in that case how can i set scroll bar based on rows or max-height for the div ?
main.html
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
I think this an HTML problem. Try to add this CSS to your code:
.panel-body {
overflow: scroll;
height: 100px;
}
overflow is a combination of overflow-x and overflow-y. If you only need to add scrollbars for vertical overflow, only take overflow-y: scroll; If you dont want to see the scrollbar when content small, try overflow: auto.
I think OP wants to have the scroll when the retrieved data (tests) is a certain value. ng-class is your friend here.
<style>
.conditionalScroll{
width: 100%;
height: 225px; /*change to your liking*/
overflow: scroll;
}
</style>
<!-- you may change threshold to your liking as well -->
<div ng-class="{conditionalScroll:tests.length>100}">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I think you just need to add a style for the class 'panel-body' containining the max-height and overflow value... like the below:
CSS
.panel-body {max-height:400px;overflow:scroll;}
or if you want to add another class so you dont affect the panel-body class then either add a new class in the panel-body on that page like below
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h3 class="panel-title">Notification<span class="badge">{{tests.length}}</span></h3>
</div>
<div class="panel-body panel-scroll">
<ul>
<li class="slide" ng-repeat="test in tests">
<div class="alert" role="alert" ng-class="{'alert-info': notification === 'H'}">
<span>{{test}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.panel-scroll {max-height:400px;overflow:scroll;}
Here is my HTML, first:
<div id="master-template" class="row" style="height: 600px;">
<!-- Left Side -->
<div class="col-lg-6" style="height: 100%;">
<div class="row" style="height: 50%;" >
<div class="region col-lg-12" data-div="1">
</div>
</div>
<div class="row" style="height: 50%;">
<div class="region col-lg-12" data-div="2">
</div>
</div>
</div>
<!-- Right Side -->
<div class="region col-lg-6" style="height: 100%;" data-div="3">
</div>
</div>
And my jQuery:
$("#master-template").find('.region').click(function() {
alert("click");
});
So, I only get the alert when I click on the "Right Side". Because it is a direct descendant. The others do not register; almost as if the .row is blocking it. Is there a way I can (with either one or two) click functions in jQuery register clicks for all div's with .region? children, grandchildren, etc?
This is happening because Right Side is the only .region DIV that has any dimension. (By virtue of height:100%).
The other two .regions are not being clicked because they have no dimension (height is 0)
I have a link to my div mySkills, and when I access my page I have the bars loaded, but I just want to load my progress bars when i click in my href to this div mySkills.
How can we do that?
<nav id="menu">
<ul>
<li >About</li>
<li>Skills</li>
<li >Contact</li>
</ul>
</nav>
<div class="mySkills">
<h1>John <span>Skills</span></h1>
<div class="skill">
<h6>HTML</h6>
<div class="progress_bar orange">
<div style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<h6>CSS</h6>
<div class="progress_bar teal">
<div style="width: 67%;"></div>
</div>
</div>
<div class="skill">
<h6>Photoshop</h6>
<div class="progress_bar blue">
<div style="width: 80%;"></div>
</div>
</div>
<div class="skill">
<h6>PHP</h6>
<div class="progress_bar green">
<div style="width: 55%;"></div>
</div>
</div>
<div class="skill">
<h6>Javascript</h6>
<div class="progress_bar yellow">
<div style="width: 55%;"></div>
</div>
</div>
</div>
Here is a possible approach to your request:
http://jsfiddle.net/pHyz9/
HTML added:
<button id="update">Update Values</button>
CSS:
.skill {
display: none;
}
.progress_bar div {
transition: width 1s;
}
Javascript (jQuery):
$("#update").on("click", function(){
$(".skill").fadeIn(800);
$(".orange div").css("width", "75%");
$(".teal div").css("width", "67%");
$(".blue div").css("width", "80%");
$(".green div").css("width", "55%");
$(".yellow div").css("width", "55%");
});
It uses CSS3, it is a bit incomplete, and the code could be prettier, but this is only an example to show what can be done with such a simple code.
So you should take following steps in order to achieve your goal.
Steps:
1. Make your <div class="mySkills"> hidden using css.
div.mySkills
{
display:none;
}
2. And on Skills
$('a[href="#mySkills"]').click(function(e){
e.preventDefault;
e.stopPropagation;
$('div.mySkills').toggle();
});
More about .toggle() you can read from here.
P.S.: If I understand correctly your question and answer in properly replay with comments. I will correct it.
If you want to see working example open following link.