Solution 1 :

It’s hard to give a complete answer without knowing how your components are set up, but there are a couple of HTML features that might help you, depending on whether you want to choose based on space above/below within the viewport, or above/below within the parent component.

If you want to do it based on space within the viewport, you can use Element.getBoundingClientRect() to find distance between the input and the top/bottom of the viewport:

const element = document.querySelector('input');

const elementRect = element.getBoundingClientRect();

const spaceAbove = elementRect.top;
const spaceBelow = window.innerHeight - elementRect.bottom;

if (spaceBelow < spaceAbove) {
  // logic to render with more space above input
} else {
  // logic to render with more (or equal) space on bottom
}
<input />

If you want to do it based on space within the parent component, you can use Element.offsetTop and Element.offsetHeight to calculate space between the input and the top/bottom of its closest positioned ancestor:

const element = document.querySelector('input');

const spaceAbove = element.offsetTop
const spaceBelow = element.parentNode.offsetHeight - (element.offsetTop + element.offsetHeight)

if (spaceAbove > spaceBelow) {
  // do something
} else {
  // do something else
}
<div style="padding: 200px 0 100px 0; position:relative">
<input />
</div>

Problem :

Basically I have an input field and want to display a div containing a list below OR above it depending where there is more space. since in some cases this input field could be at the bottom of the page or maybe at the middle or top. So i thought of using the view port to identify if there is more space below or above the input field and then display the div accordingly. Trying to this purely with some CSS and html. any recommendations will be helpful.

My basic html structure :

<input/>
<div id="container">
   <ul>
      <li ngFor> 
        <span> field1 </span>
        <span> field2 </span>
        <span> field3 </span>
      </li>
   </ul> 
</div>  

Comments

Comment posted by Pedro Coelho

Why don’t you add classes like “inputBottom” / “inputMiddle” / “inputTop” to those input fields and apply different logics for them, in order to add the content?

Comment posted by Clueless

@PedroCoelho yea ill have to do something like that in order to display the div where i want after identifying if there was more space below or above my input element.

Comment posted by Clueless

Thanks ! Im basicaly trying to create my version of the