Set element height from another element in Angular2

Question

I have two divs in a section which contains dynamic content. The left container contains a list of numbers and the other one list of input fields. I need to prioritize container of input fields if that container stretches out to 600px of height, I need to have that height on my number container and then that element goes into separate scroll if its longer than 600px.

Example img

Code example

<section>
  <div class="numbers">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>

  </div>
  <div class="inputs">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

  </div>

</section>

section {
  display: flex;
}
.numbers {
  margin-right: 50px;
}
.numbers div {
  background: black;
  height: 20px;
  width: 20px;
  margin-bottom: 10px;
  color: #fff;
}
.inputs {
  display: flex;
  flex-direction: column;
}
  input {
    margin-bottom: 20px;
  }

could you tolerate a fixed height? 600px like you mentioned in your question? — Joshua Chan
– Joshua Chan, Commented May 11, 2018 at 13:12

Foram Sojitra · Accepted Answer · 2021-01-25 14:20:13Z

3

<div #getElementHeight>
          Height
    </div>
    <div [style.height.px]="getElementHeight.offsetHeight" class="rect-side-line">
      Height of this element is {{ getElementHeight.offsetHeight }}
    </div>

as per this you can get height of first div and set it to second div.

answered Jan 25, 2021 at 14:20

Foram Sojitra

40810 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nenad Drobac · Accepted Answer · 2018-05-11 14:03:28Z

1

This is my solution to this problem, i made a function that is called in Oninit and every button that updates the content and on html i called it [style.height.px]="elHeight - 100"

This is my Typescript code

  getHeight() {
        const leftEl = document.getElementById('number-col');
        const rightEl = document.getElementById('question-col');

        setTimeout(() => {
          this.elHeight = rightEl.clientHeight;
        }, 100);


      }

answered May 11, 2018 at 14:03

Nenad Drobac

411 silver badge6 bronze badges

Comments

Neil · Accepted Answer · 2018-05-11 12:43:11Z

0

adaptating a div height in javascript or in angulaJS seems to me a wrong choice, so i tried to do that in css, and that is a not so clean solution

section{
  padding-left:40px;
  position:relative;
}
.numbers{
  overflow-y:scroll;
  max-height:100%;
  position:absolute;
  left:0px;
}

this seems to work but there are plenty of other ways to do that: bootstrap, tables, grid, flex, anything you already use in your html in order to keep consistent.

answered May 11, 2018 at 12:43

Neil

3924 silver badges20 bronze badges

1 Comment

Neil Over a year ago

didn't saw you were already using flexboxes, my bad, but you now have the main idea, stackoverflow is all about showing us what you have tried and failed rather than asking for code writing ;) good luck

Collectives™ on Stack Overflow

Set element height from another element in Angular2

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related