<div ngClass="{{isDecisionHistory? 'card border-bottom-0':'card'}}">
<div class="card-header pl-2" (click)="isDecisionHistory = !isDecisionHistory"
[attr.aria-expanded]="!isDecisionHistory" aria-controls="collapseBasic">
<i class="rca-icon ml-0 align-middle h3">{{isDecisionHistory ?'arrow_down':'arrow_up'}}</i>
Decision History
</div>
<div id="collapseBasic" [collapse]="isDecisionHistory">
<div *ngIf="!!decisionHistory_rowData; else nodata">
<app-ag-grid
[rowData]="decisionHistory_rowData" [columnDefs]="decisionHistory_columnDefs">
</app-ag-grid>
</div>
</div>
</div>
With the above code, my grid width is getting reduced as the default 200px is being given for ag-header-cell.
But when i remove this thing : id="collapseBasic" [collapse]="isDecisionHistory" from 7th line, the width is fine. How to handle this?
Related
i have chatbox and this is my html code
<div class="card-body msg_card_body card-footer" >
<template v-for='(data,data_id) in active_chat_datas ' class='card-footer' id='scrollable' >
<div class="d-flex justify-content-start mb-4 last-footer" v-if="data['to_facebook_id'] == null">
<div class="img_cont_msg">
<img :src="active_customer['facebook_messages_link']" class="rounded-circle user_img_msg" />
</div>
<div class="msg_cotainer">
#{{data['message']}}
<span class="msg_time" style='width:250px;'>#{{date_format(data['created_at'])}}</span>
</div>
</div>
<div v-else class="d-flex justify-content-end mb-4 last-footer">
<div class="msg_cotainer_send">
#{{data['message']}}
<span class="msg_time_send" style='width:100px;'>#{{date_format(data['created_at'])}}</span>
</div>
<div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg" />
</div>
</div>
</template>
<div class="d-flex justify-content-end mb-4" id='myid'>
<div class="msg_cotainer_send ">
<span class="msg_time_send" style='width:100px;'></span>
</div>
</div>
</div>
and i have this js code
$('#myid').stop ().animate ({
scrollTop: $('#myid')[0].scrollHeight
});
when the code
scrollTop: $('#myid')[0].scrollHeight
execute the scrol go to the end of the page not of the chat
like this pictures
but i need it to scroll to the botton of the chat like this picture
and this is sandbox link
https://bo1lej.csb.app/
https://codesandbox.io/s/bo1lej
how can i do that thanks ..
Try this code below,
$("#custommyid").animate(
{ scrollTop: $("#custommyid")[0].scrollHeight },
2000
);
This is the working code.click here
In the provided sandbox,I make scrolling the chat app when the page loads ,since you didnt provide the chat url for getting chat messages and load it on the frontend.
I will give some knowledge about this. Because later someone can revist this and can learn this instead of just looking the code.animate function use to smoth the scrolling functionality. we can set this trasition.In here I set 2000ms seconds.
And there some important point there.You can see that I have used "scrollHeight".It means total container height.there are couple of other concepts there.just see below
scrollTop -by now how amount of height user has scroll
clientHeight -how much of amount that user see in the container
Please try this :
<script>
$(document).ready(function () {
$(".msg_card_body").scrollTop($(".msg_card_body")[0].scrollHeight);
});
</script>
this anwser is based on the sandbox you provided
I am trying to customize the tooltip's width of element-ui framework because text inside tooltip is broken incorrectly.
Here is generated tooltip element with is placed on the bottom of body tag
<div role="tooltip" id="el-tooltip-8061" aria-hidden="true" class="el-tooltip__popper is-dark popper-width" style="transform-origin: center top;z-index: 2031;/* display: none; */">
<div data-v-65209316="" class="row">
<div data-v-65209316="" class="col-5">Employee</div>
<div data-v-65209316="" class="col-7">John Smith</div>
</div>
<div x-arrow="" class="popper__arrow" style="left: 77px;"></div>
</div>
and here is my vue code:
<el-tooltip placement="bottom" theme="dark" popper-class="popper-width" :popper-options="customPopperOptions">
<template slot="content">
<div class="row">
<div class="col-5">
Employee
</div>
<div class="col-7">
John Smith
</div>
</div>
</template>
</el-tooltip>
and
customPopperOptions() {
return {container: document.body, boundariesElement: document.body}
}
I see you are using bootstrap classes, have you thought about splitting them out because your 12 grid has less space to occupy on your employee tooltip. 1st off,
try evening them out:
<div class="row">
<div class="col-6">
Employee
</div>
<div class="col-6">
John Smith
</div>
</div
See if that works, should split the difference. If this causes issues then you will probably need to adjust your CSS code because it looks as though your class .popper-width has a set width.
I had created a simple chat system using jQuery and ajax, I want the scroll bar to be in the bottom of div in two occasion that is :
_first time loading page.
_New messages has arrived.
the problem is the scroll bar is auto scrolling down all the time.
this is my html and javascript code
function load (){
$.post("action.php",{
Action : "get"
},function(resp){
var scrollTop = $('#shoot').scrollTop();
var clientheight = $('#shoot').height();
var scrollTop = parseInt(scrollTop)+320;
var scrollHeight = $('#shoot').prop("scrollHeight");
$('#shoot ').html(resp);
if (scrollTop < scrollHeight ) {
}else {
$('#shoot').scrollTop() = $('#shoot').prop("scrollHeight");
}
});
}
<div class="row justify-content-center h-100">
<div class="col-md-8 col-xl-6 chat">
<div class="card">
<div class="card-header msg_head">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Chat with Khalid</span>
<p>1767 Messages</p>
</div>
<div class="video_cam">
<span><i class="fas fa-video"></i></span>
<span><i class="fas fa-phone"></i></span>
</div>
</div>
<span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
<div class="action_menu">
<ul>
<li><i class="fas fa-user-circle"></i> View profile</li>
<li><i class="fas fa-users"></i> Add to close friends</li>
<li><i class="fas fa-plus"></i> Add to group</li>
<li><i class="fas fa-ban"></i> Block</li>
</ul>
</div>
</div>
<div id="shoot" class="card-body msg_card_body">
<div class="d-flex justify-content-start mb-4">
<div class="msg_cotainer">
Hi, how are you samim?
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Hi Khalid i am good tnx how about you?
</div>
</div>
</div>
Can you first correct this line:
$('#shoot').scrollTop( $('#shoot').prop("scrollHeight") );
/* $('#shoot').scrollTop() = $('#shoot').prop("scrollHeight"); */
and then retry? Because the correct way to change scrollTop position is by passing a parameter to the jQuery function .scrollTop(value) - docs at api.jquery.com
Also, you said "scroll bar is auto scrolling down all the time" - but it is not clear when / how often do you call the load() function. Because, from your code, it seems that after each call, no matter the response, you run a scroll action. If you want to make an auto-scroll only at new messages - then you should for check that. For example, make "action.php" return false if no new messages, and in the load function, don't do any scroll if response is false.
For those who used $("#shoot").animate({ scrollTop: $('#shoot').prop("scrollHeight")}, 1000); this keeps the scroll bar scrolling down all the time , so you must change it to
$('#shoot').scrollTop( $('#shoot').prop("scrollHeight") ); , this is the right way to get to new position of the scroll bar without forcing it to stay at specific position.
I'm trying to figure out how to resolve the problem with hiding/showing elements when I'm changing the column size.
You can see - there is some user avatar and round badge with the number of other (hidden) users. After click on it popover is shown:
What I want to achieve:
When column width is changed then more/fewer avatars are visible and number in the round badge is changed (if all of the avatars are still not visible)
Data for popover is changed and it's consistent to displayed information
Let's get to the code (data is hardcoded at the moment):
Column that I talked about:
<div class="fixed-size-column-130">
<div class="d-flex align-items-center flex-row">
<div class="profile-image-holder d-flex justify-content-center align-items-center m-r-5">
<i class="cc-icon cc-icon"></i>
</div>
<div *ngIf="diary.Approvers.length > 1" class="round-badge cc-grey-100-bg cc-grey-200-txt">
<a [ngbPopover]="popContent" placement="right">+{{diary.Approvers.length - 1}}</a>
<ng-template #popContent><app-approvers [approvers]="testApprovers"></app-approvers></ng-template>
</div>
</div>
</div>
Popover:
<div *ngFor="let user of approvers">
<app-approver [user]="user"></app-approver>
</div>
Single user in popover:
<div class="d-flex align-items-center p-3 border-bottom">
<a class="profile-image-holder d-flex justify-content-center align-items-center mr-3">
</a>
<div class="d-flex flex-column">
<p class="mb-0 small-txt bold">{{user.firstName}}</p>
<p class="mb-0 small-txt">{{user.lastName}}</p>
</div>
</div>
I don't know how to handle this. I was thinking about ngIf directive but IMO there has to be a better way to achieve my goal. Can someone help me, please?
STACKBLITZ example: https://stackblitz.com/edit/angular-gjunnt-ykjiqy
Calculate how many elements can occupy in the container. and make a subarray of profile based on this value. Call the same in the window resize
#HostListener("window:resize", ["$event"])
onResize(event) {
this.totalOccupy();
}
ngOnInit() {
this.totalOccupy();
}
totalOccupy(): any {
let space = Math.floor(
this.divToMeasureElement.nativeElement.offsetWidth / this.itemWidth
);
this.displayApprovers = this.testApprovers.slice(0, space);
}
Full Solution: stackblitz
See the difference by resizing the output window
I have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.
I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?
Here's my HTML of the carousel's first slide:
<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide">
<!--slogan and CTA-->
<div class="container carousel-caption main-slider">
<div class="row header-slogan fadeInDown animated">
<div class="col-xs-12">
<section class="cd-intro">
<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
</section>
</div>
</div>
<div class="row header-tagline fadeInDown animated">
<div class="col-xs-12">
<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
</div>
</div>
<div class="row header-cta fadeInUp animated">
<div class="col-xs-12">
<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
<i class="fa fa-play fa-fw"></i> Watch a Video
</div>
</div>
</div>
<!--slogan and CTA end-->
</div>
Here's my jQuery :
<script>
$(document).ready(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
</script>
Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:
//Place this in your document ready
$(window).resize(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
How about srcset?
<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">