Identifying shifts in offsetTop

In my design, I have a page where scroll bars are not allowed, meaning all content must be visible at once. The image below shows the basic layout of the screen to give you an idea.

The layout consists of two blocks - Block 1 and Block 2. Block 1 is expandable and may not always exist based on the content. It has a max-height of 500px and is only supported on iPads and computers, not mobile devices. Block 2, however, remains on the screen at all times.

My question is: How can I dynamically resize Block 2 based on the offsetTop?

I have attempted to use @ViewChild(), but it does not consistently detect changes, causing the content to extend beyond the viewable area.

This is the method I have tried:

@ViewChild('block2') set offset(content: ElementRef) {
    content.nativeElement.style.maxHeight = `calc(100vh - ${this.offsetTop + 20}px)`;
}

Regrettably, I am unable to share the source code, but any suggestions would be greatly appreciated.

Block 2 needs to constantly monitor changes in offsetTop and adjust its size to fill the remaining space on the page.

javascripthtmlcssangular

Answer №1

Eliminate the need for javascript and opt for a simpler solution using only css. By utilizing flexbox, you can efficiently manage the layout of your elements without the overhead of unnecessary calculations.

index.html

<div id="container">
  <div class="expandable">
    I am expandable
  </div>
  <div>
    I am not
  </div>
</div>

index.css

#container {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Ensure your container takes the full screen */
  height: 100vh;
  width: 100vw;

  /* Here is the magic */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

#container > *:not([class="expandable"]) {
  flex-grow: 1;
}

You can easily control the height of the expandable div programmatically, causing the second div to adjust its size accordingly within the screen boundaries.

EDIT

This method may require some fine-tuning based on your specific project requirements. Applying flex-grow to a flex child allows it to automatically expand to occupy any remaining space.

For more information, visit : MDN - Doc

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How should we structure our JavaScript code: MVC or self-rendering components?

I'm in the process of developing a highly JS-centric web application. The bulk of the work is being carried out on the client side, with occasional syncing to the server using AJAX and XMPP. This is my first venture into creating something of this ma ...

javascriptjquerymodel-view-controllercomponentscode-organization

Is it possible to display a pdf.js page as actual HTML elements rather than as canvas or SVG?

I am in the process of creating a user-friendly mobile interface for pdf reading. However, I want to incorporate more advanced features by developing my own pdf reader instead of relying on the pdf.js team's viewer. Is there a method available to rend ...

javascripthtmlhtml5-canvaspdf.jspdfjs-dist

Avoid displaying null values in SELECT and GET operations when using node-postgres

Within my Express API functionality, I aim to offer the client flexibility in providing their contact details, namely phone number or website address, with the option of leaving them blank. The SELECT queries in use are as follows: -- Retrieve all users S ...

javascriptsqlpostgresqlexpressnode-postgres

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

cssjsonangularpage-break

When testing on jsfiddle, the script functions properly with pure JavaScript. However, when integrating it into my own code, it fails to work unless jQuery is included

Visit this link to access the code snippet. Below is my code: const chk = document.getElementById('chk'); const body = document.body; $(function(){ chk.addEventListener('change', () => { $('.body').toggleClass( ...

javascriptjquery

Looking for a way to display a spinner loader while transitioning between routes in Angular 4? Although I'm receiving events, I'm struggling to actually show the loader on screen

I'm currently working on a project that requires a loader to display between two routes. Although I am receiving route events, the loader is not visible. import { Component } from '@angular/core'; import { Router, Event, NavigationStart, Na ...

angularroutesloader

Automatically selecting and fetching checkbox values using JavaScript

I was struggling with coding a function that involved generating checkboxes using JavaScript. My goal is to automatically select the elements "March" and "September" from the array target[] and display them as checked in the text area. So, "March" and "Se ...

javascripthtmlarrayscheckbox

Tips for making immutable state changes in React

Is there a way to update specific content in the state without affecting all other data stored in the state? Just to provide some context: The function below is executed within another "handleChange" function that takes the event as input and assigns the ...

javascriptreactjsstateimmutability

Issue with BrowserRouter, improperly looping through the array using map

Encountering an issue with importing content in my React app project using <BrowserRouter>. Within the app, there are 3 Material-UI Tabs: /lights, /animations, /settings. <Switch> <Route path="/lights" component={LightsMenu} /> ...

javascriptreactjsmaterial-ui

The width of table columns is altered upon the second rendering in JQuery DataTables

Is there a way to prevent JQuery DataTables cells from extending width after adding hyperlink to cell? I am facing an issue where I have two tables on the same page. The first table column has a link which populates the second table. It works fine when th ...

htmljquerycssajaxdatatables

Passing information from Vue to a modal

I'm working with 3 components: TaskList, TaskItem, and TaskForm. Within the TaskList component, there is a loop that renders all the data in TaskItem. Each TaskItem has an edit button meant to open a TaskForm modal (using bootstrap) displaying the sp ...

javascriptvue.jsbootstrap-modalbootstrap-5

Is there a way to store a file in a server directory using the <a href='mypdf.pdf'> tag?

I find myself in a bit of a bind. I have a document that needs to be saved in my server directory, which is attached in an <a href='mypdf.pdf'>My pdf</a> tag. The issue is that the filename, mypdf.pdf, is dynamically changing via Jav ...

javascriptphpajaxfile-uploaddownload

Is there a way to create a navigation menu that highlights as we scroll down the page?

Check out this example of what I am looking for. https://i.stack.imgur.com/fdzvZ.png If you scroll, you will notice that the left menu highlights. Sub-menus will extend when the corresponding menu is highlighted and collapse when other menus are highlig ...

javascripthtmlnavscrollspy

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

css

Transform the words in a string into an array

I'm scratching my head trying to find a solution on Stack Overflow, but nothing seems like the right fit. Can anyone provide some guidance? I need a regex that will enable me to use JavaScript split to break a string into an array. The test case is: ...

javascriptregex

Achieving a seamless blend of parent background with child background: A step-by

I am trying to make the parent background color overlap the child background color in two divs. Currently, the child's background is overlapping the parent's background. Please refer to the JS-Fiddle link below for more information: <div id=" ...

css

Trigger jQuery to play audio files

Something seems off with this code. The audio file isn't playing when the webpage loads. $(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src','content/aud ...

jqueryhtml

Exploring the utilization of functions beyond module exports

Striving to clearly communicate my intentions, please feel free to ask if anything is unclear. Within a file named www, I am configuring my socket as follows: var server = http.createServer(app); var io = require('socket.io')(server); require(& ...

javascriptnode.js

Toggle a Vue.js method to display responses for a particular question

Currently, I am in the process of developing a simple toggle feature for a FAQ section. The idea is that when a user clicks on an icon associated with a specific question, only that question's answer should be displayed. Although the function is oper ...

javascriptvue.jsvuejs2vue-componentnuxt.js