CODEWITHSUNDEEP
javascriptcssangular
Nenad Drobac
Nenad Drobac

Reputation: 41

Set element height from another element in Angular2

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;
  }

Upvotes: 3

Views: 3182

Answers (3)

Foram Sojitra
Foram Sojitra

Reputation: 408

<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.

Upvotes: 3

Nenad Drobac
Nenad Drobac

Reputation: 41

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);


      }

Upvotes: 1

Neil
Neil

Reputation: 400

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.

Upvotes: 0

Related Questions