Develop Reference

How to prevent angular component to scroll page instead of table?

I have this page like image below:
The filter has a dynamic width and is an external angular component
the table is inside the "parent" component
FYI:
The table component has a [height]="something" that accepts either string or number as parameters.
The table is a pivot table using a custom component called Dev-Extreme
All i want is to assign a value inside the [height]="" in the HTML component page that is dynamic so that the height of the table resizes based on how much space there is left in the page.
Could also use TypeScript to do that and maybe calculate the height each components takes in the page except the table and do calculations on that.
Can anyone help me here, i've been stuck on this for two hours.

You could use some css for what you need.
Use display: flex to distribute the sections as you need (top section fixed and bottom section with dynamic height).
And use overflow: auto to set the scroll in the table container only.
Example:
https://codepen.io/bcngr/pen/wvXdWBE
<div class="main">
<div class="filters-container">
<span>Filters</span>
</div>
<div class="table-container">
<div class="table">
<span>Table</span>
</div>
</div>
</div>
html, body {
padding: 0;
margin: 0;
}
.main {
height: 100vh;
display: flex;
flex-direction: column;
}
.filters-container {
background-color: #edf2f4;
height: 100px;
}
.table-container {
flex: 1;
overflow: auto;
}
.table {
background-image: linear-gradient(#8d99ae, #2b2d42);
height: 600px
}

I found a solution to this here's what i did:
Creating a #ViewChild() to gather the div element in my .ts:
#ViewChild('pivotFilter', { static: false }) stickyHeader?: ElementRef;
Here:
The div has an id="pivotFilter"
Using ViewChild we can get the HTML element
Declaring getter to calculate table height:
get filterHeight() { return window.innerHeight - (this.stickyHeader?.nativeElement.offsetHeight + 88); }
Here:
window.innerHeight is the height of the page
this.stickyHeader?.nativeElement.offsetHeight is the height of my component
That + 88 is the rest of the page height (the title, and the space between filter and table)
I had to run change detection on content initialization to prevent errors like so:
ngAfterContentInit(): void {
this.cd.detectChanges();
}
Then i just applied the height to the html page.
Hope this helps someone, cheers !

Dynamic amount of css grid columns

right now I have a page with a grid of articles and a absolute positioned footer. What I am trying to accomplish, is that the article grid has a dynamic amount of columns, based on your window height, I thought about calculating the distance between the filter bar (above the article grid) and the footer and divide it by each of the height of a article row, but I just can't figure out how to do it.
Does anyone have an idea?
Code:
<FilterBar>
<div role="button" onClick={filterArticles} className="work-filter-container">
<input type="checkbox" className={`${checkedFilter ? 'checked' : ''} work-filter`} />
<p>ALLEEN WERK </p>
</div>
<div>
<p>sorteer op</p>
<button
type="button"
id="buttonrecent"
className={activeRecent ? 'active' : ''}
onClick={orderRecent}
>
recent
</button>
<span>/</span>
<button
type="button"
id="buttona-z"
onClick={orderAlphabetical}
className={activeAlphabetical ? 'active' : ''}
>
A - Z
</button>
</div>
</FilterBar>
<div>
<GridWrapper>
{articlesOrder &&
articlesOrder.map(article => {
const data = article.node;
const date = data._meta?.firstPublicationDate;
const formattedDate = dateTimeService.getDate({ dateTime: date });
return (
<Article key={data._meta.id}>
<Link href={`/articles/${data._meta.uid}`}>
<a>
<span>{formattedDate}</span>
<p>{data.title?.[0]?.text}</p>
</a>
</Link>
</Article>
);
})}
<br />
</GridWrapper>
</div>
<Footer position="absolute" textColor="white" />
CSS:
export const GridWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 1.2rem;
width: fit-content;
padding: 0 2.3rem;
#media (${({ theme }) => theme.respondTo.desktop}) {
width: 100vw;
overflow-x: auto;
white-space: nowrap;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(min(5), 1fr);
}
&::-webkit-scrollbar {
display: none;
}
`;
Screenshot of the problem below:
I want the result to be that the columns go till the footer, without having a fixed amount, like a dynamic amount based on the height of the window.

What you can do to solve this problem
First you have to find out the window.innerHeight where one column fits right, then you increase the screen height with your inspect elements, set it to responsive and look at which height two columns fit right, for example if one column fits the best at 500px window.innerHeight and two columns at 530px, then you know every 30px that is added to your innerHeight, the column count has to increase by 1.
First you have to use the React useState to keep track of the column count
const [columnsAmount, setColumnsAmount] = useState();
With all the above information, you can create a for loop that will look similar to this:
useEffect(() => {
let columns = 1;
for (let i = 500; i < window.innerHeight; i += 30) {
columns += 1;
}
setColumnsAmount(columns);
}, []);

Divs Reverse scroll with translateY() in react.js

I'm trying to create with React.js a type of scroll like this one: http://spassky-fischer.fr/, where two divs are scrolling in inverse directions. They are using transform: translateY(), and I tried to implement it as well but I don't get where I'm wrong here. Here's the architecture of the projet. The current version is also here: http://noiseless-tendency.surge.sh/
App.js:
ComponentDidMount(){
window.addEventListener("scroll", this.scrollHandler);
}
...
scrollHandler = () => {
this.setState({
scrollPositionY: window.scrollY
})
}
...
render() {
return (
<div className="App">
<MainItemsContainer {...this.state} />
</div>
);
}
MainItemsContainer.js:
render() {
let style_first = {
transform: `translateY(${this.props.scrollPositionY})`,
overflow: "hidden"
}
let style_second = {
transform: `translateY(-${this.props.scrollPositionY})`,
overflow: "hidden"
}
return (
<div className="main_items_container">
<section
style={style_first}
className="main_items_container_child">
<ItemsContainer {...this.props}/>
</section>
<section
style={style_second}
className="main_items_container_child">
<ItemsContainer {...this.props}/>
</section>
</div>
);
}
App.css:
.main_items_container {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
}
.main_items_container .main_items_container_child{
width: 50%;
height: 100vh;
overflow: scroll;
}

The sample site you linked actually uses the wheel event rather than the scroll event. It looks like they use this library to accomplish it: https://swiperjs.com/demos/ . My understanding is that the scroll event only fires if there's a scrollbar, which is why your event handler didn't fire.
I've created a Code Sandbox that produces the effect you want in React. It does rely on jQuery to compute the height of the whole element, and to set the initial transformation for the left half. However, those are just convenience methods, and if you don't want jQuery as a dependency, you can find workarounds for those pretty easily.

So you could use hooks and pass a custom css var through inline styling on state change to update your translateY. I have not tested but I hope you get my drift.
let elRef = useRef(null)
let[ height, setHeight] = useState()
use useLayoutEffect hook to add the event listener
useLayoutEffect (()=>{
if(!elRef) return
elRef.current.addEventListener("scroll", setHeight(elRef.current.scrollY));
return elRef.current.removeEventListener("scroll", setHeight());
}, )
and put the ref on you outermost div perhaps , so your outer div would look like
<div className='container' ref={elRef} style{{ --height: height}} >
<div className='columOne' > </div>
<div className='columTwo' > </div>
</div>
in your css (I haven't put all that is required but just showing how you custom css var is used
.container{
display: flex;
flex-direction: row
}
And within that equal sized columns
.columnOne{
transform: `translateY(calc(var(--height) * 1px)`,
overflow: "hidden"
}
.columnTwo{
transform: `translateY(-calc(var(--height) * 1px)`,
overflow: "hidden"
}
Does that help. Let me know if I could be more clear. Or use styled components and pass a prop in to achieve the same result.

Render google map with full screen on initialize

So I have been working with Google maps for quite some time now but I am stuck at a point. I have a container div in which I am rendering my map but initially its display is none. I have a floating button and I want that on its click the container's display should change to block and it should trigger the fullscreen event so the map is displayed in full screen. So far I have done this:
// html for map
<div id="searchMap" class="search-map">
<div class="embed-responsive">
<div id="searchViewMap" style="height: 540px;"></div>
<div id="restaurant-label" class="restaurant-info-container-search"></div>
</div>
</div>
initially div with id="searchMap" has display: none
// html for button to show the map
<img src="{{asset('/images/map_button.png')}}" class="content-section__map-button" onclick="showMobileMap()">
That is an image button.
// JavaScript method onclick of the button
function showMobileMap() {
$('#searchMap').css('display', 'block');
$('#searchViewMap div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
}
Now the problem that I am facing is that when I click the button for the first time it displays the container with the map but it doesn't make it full screen. And when I click the button again it makes it full screen. I don't know why this is happening but I want that the map renders full screen on the first click.

try to change :
<div id="searchViewMap" style="height: 540px;"></div>
to
<div id="searchViewMap" style="width: 100%; min-height: 100vh;"></div>
or add css :
#searchMap {
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: 0;
z-index: 2;
}

Two containers sharing vertical height dynamically

I have two containers which need to share their parent's height, but the second container is added dynamically on demand. There can be a lot of content in both containers so the opportunity to scroll must be given.
I have a working solution for a 50/50 share, but I wonder if it's possible to share the height dynamically.
.wrapper__container {
display: flex;
height: 100%;
max-width: 100%;
flex-wrap: wrap;
align-items: flex-start;
}
.inside__container {
flex: 0 0 100%;
max-width: 100%;
overflow-y: auto;
}
Part of the wrapper component render method:
render() {
const maxHeight = this.state.showDetails ? '50%' : '100%';
const minHeight = this.state.showDetails ? '50%' : '100%';
return (
<div className="wrapper__container">
<Config
itemsGreen={this.state.itemsGreen}
itemsRed={this.state.itemsRed}
changeItemCount={this.changeItemCount}
/>
<Container
itemCount={this.state.itemsGreen}
className="inside__container"
style={{
backgroundColor: 'green',
maxHeight,
minHeight
}}
onClick={this.handleClick}
/>
{this.state.showDetails && <Container
itemCount={this.state.itemsRed}
className="inside__container"
style={{
backgroundColor: 'tomato',
maxHeight,
minHeight
}}
/>}
</div>
)
}
I've setup a codepen, where you can change the count of items to test the behaviour. Click on the green container to show the red one.
At least it would be a good solution to limit the green container to a max-height 50% and let the red container take up the rest. If the green, for example, is only 20% the red can take 80%.
In a perfect world this should be possible without js calculations but if someone has an idea to calculate this (only react/vanilla).
Target browser is IE11.
Edit: Added a new Pen which is broken, but shows the desired flexible behaviour when there are only a few items.

Each time the outer container is rendered, you need to get the height of the container and divide it by two, then apply that number as the height of each of your internal divs. Like so (using jquery):
var $two = $('<div id="two"></div>');
var $three = $('<div id="three"></div>');
$('#container').append($two);
$('#container').append($three);
var h = $('#one').height();
console.log((h/2)-1)
if($('#two').height() < ((h/2)-1)) {
$('#three').height( ( h-$('#two').height() ) - 1 );
} else {
$('#two').height((h/2)-1);
$('#three').height((h/2)-1);
}