We Keep Coding

Display overflow-y only there is a difference in height in Angular 2 and higher

Consider the following code segment:
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div id="leftContentDiv" style="height:125px;">
...
</div>
</div>
<div class="col-md-3">
<div id="rightContentDiv">
...
</div>
</div>
</div>
</div>
The div container with id 'leftContentDiv' has a fixed height size; therefore the div container with id 'rightContentDiv' will adjust to the height size of the div container with id 'leftContentDiv' provided the div container with id 'rightContentDiv' does not have content that exceeds the height size of the div container with id 'leftContentDiv', since these div containers are on the same row.
That being said, may one display a overflow-y when the div container with id 'rightContentDiv' begins to exceed the height size of div container with id 'leftContentDiv' instead of adjusting these div containers to the height size of the div container with the greatest height size.
For example:
HTML:
//replace <div id="rightContentDiv"> with <div id="rightContentDiv" [ngClass]="displayVerticalScroll">
CSS:
.vertical-scroll {
overflow-y: scroll;
}
TS:
public displayVerticalScroll(): string {
let leftContentDivHeight = document.getElementById('leftContentDiv').clientHeight;
let rightContentDivHeight = document.getElementById('rightContentDiv').clientHeight;
if (leftContentDivHeight < rightContentDivHeight) {
return 'vertical-scroll'
}
}
Please advice if this is feasible or perhaps I should approach this differently.

Declare one variable in the component
verticalScroll:boolean = false;
public displayVerticalScroll(): string {
let leftContentDivHeight = document.getElementById('leftContentDiv').clientHeight;
let rightContentDivHeight = document.getElementById('rightContentDiv').clientHeight;
if (leftContentDivHeight < rightContentDivHeight) {
this.verticalScroll = true;
}
}
In your HTML
<div id="rightContentDiv" [ngClass]="{overflowclass:verticalScroll}">

How to force scroll in overflow-y div

I'm trying to force an offset scroll in a div that contain a ngfor list
I tried this on the div that as the overflow-y:
#ViewChild('list') listRef: ElementRef;
then on click I try this with some log to be sure it's called
this.listRef.nativeElement.offsetTop = 500;
Nothing happens, any idea how I can achieve this ?
EDIT :
Html :
<div
#gridContainerId
class="gridContainer">
<a *ngFor="let item of images;">
<img src="{{getImage(item)}}"/>
</a>
</div>
css :
.gridContainer {
height: 90vh;
overflow-y: scroll;
}
component :
#ViewChild('gridContainerId') ref: ElementRef;
this.store.pipe(
select(fromImages.getImages),
takeWhile(() => this.componentActive)
).subscribe(imagesItems => {
this.images = imagesItems;
updateScroll();
}
);
updateScroll(){
this.ref.nativeElement.scrollTop = this.ref.nativeElement.scrollHeight;
}

I've been recently in your same scenario, when click certain button, the div scrolled to bottom, i achieved it with this code:
this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
the property scrollTop is to specify the number of pixels to be scrolled from the top of the view.
and the property scrollHeight is to get the total height of the div.

How to select element after 400px height of parent div using jquery?

I have main div(parent) with class .box and in which more than one (no limit)child div with class .abc,
so how can we only select those child div which are occur after 400px height of parent div.
Means,no all child div are select but only select those are after 400px height of parent div.
though,parent div height is not fix.
<div class="box">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
.......Unlimited div occure
</div>

One suggestion is to add a class name to them by taking their .position().top:
$('.box').find('.abc').addClass(function(){
return $(this).position().top >== 400 ? "pick" : "";
});
var picks = $('.box').find('.abc.pick'); // gives you all the divs whose
// position top is >= 400px

You can use position() to detect top position of an element depending on its parent.
$(".box .abc").each(function(){
var topPos = $(this).position().top;
if(topPos>400){
$(this).addClass("masked")
}
});
Please see this Fiddle

Checking if innerHTML exceeds width or height of parent

I have a parent div with a fixed width and a fixed height.
The contents how ever might exceed this, so I am wondering is there a way in Javascript to calculate if the content exceeds the fixed dimensions?
An example would be like this:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
A sentence that exceeds the width!
</div>
In the above case it does exceed the width. How would this be achieved in Javascript?

make a parent for your content:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
<div id="parent">
A sentence that exceeds the width!
</div>
</div>
now you can get width and height of the parent and compare it with your main div:
var h = document.getElementById("parent").offsetHeight;
var w = document.getElementById("parent").offsetWidth;

You can use DOM properties of the div and text nodes. If you can wrap the text in a <span> element, it seems like it will be easier to work with the dimension properties.
html
<div id="container">
<span>A sentence that exceeds the width!</span>
</div>
css
div {
width:50px;
overflow:hidden;
white-space: nowrap;
}
js
var cont = document.getElementById('container');
var spn = cont.getElementsByTagName('span')[0];
//alert(cont.clientWidth);
//alert(spn.offsetWidth);
if(spn.offsetWidth > cont.clientWidth) {
alert("content exceeds width of parent div");
}
http://jsfiddle.net/Bn2Uc/2/

Get div height depand on parent div height and parent height depand on document height

Here is my sample code
<div id="one">
height based on screen
<div id="two">
height based on id="one"
<div>
height based on id="two"
</div>
</div>"
</div>

html, body { height:100%; }
#one { height:some%; }
#two { height:some%; }
CSS - no JS needed here (unless you want to change the heights later).

Simply use $(this).parent().height(); for every div

Set Height and width in %. It will take the parent div's Height and Width.