CODEWITHSUNDEEP
typescript
Peter The Angular Dude
Peter The Angular Dude

Reputation: 1188

How can I change the width attribute of an element but cannot no matter what I do

I have the following code:

if(this.commentContainer.style.width !== "0") {
  console.log("Greater than 0: " + this.commentContainer.scrollWidth);
  this.commentContainer.setAttribute("width","0");
  console.log("New Greater than 0: " + this.commentContainer.scrollWidth);

  this.commentContainer.animate({
    scrollWidth: 0
  })
} else {
  console.log("Equal to 0");

  console.log("Equal to 0: " + this.commentContainer.scrollWidth);
  this.commentContainer.setAttribute("width","285");
  console.log("New Equal to 0: " + this.commentContainer.scrollWidth);

  this.commentContainer.animate({
    scrollWidth: 285
  })
}

No matter what I do to change the width, I cannot.

This is what I'm trying to do... which led me to the above

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideLeft and slideRight Effect</title>
<style>
    .box{
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
    /* Add padding and border to inner content
    for better animation effect */
    .box-inner{
        width: 395px;
        padding: 10px;
        border: 1px solid #a29415;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        var boxWidth = $(".box").width();
        $(".slide-both").click(function() {
          // alert("Width" + $(".box").width());
                if($(".box").width() === 0) {
                        $(".box").animate({
                        width: boxWidth
                });
                } else {
                        $(".box").animate({
                        width: 0
                });
            }
        });


    });
</script>
</head>
<body>
    <button type="button" class="slide-both">Slide Both</button>
    <hr>
    <div class="box">
        <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
    </div>
</body>
</html>

I want to be able to actually convert the JQUERY code to Typescript:

        $(".slide-both").click(function() {
          // alert("Width" + $(".box").width());
                if($(".box").width() === 0) {
                        $(".box").animate({
                        width: boxWidth
                });
                } else {
                        $(".box").animate({
                        width: 0
                });
            }
        });

If I can do that, this my size question is moot.

I've found that the scrollWidth and width are not the same: one is a string the other is a number.

How can I check the width of something if I cannot change it?

This is null: console.log("Current Width: " + this.commentContainer.getAttribute("width"));

So, any assistance would be appreciated.

UPDATE

So all the code comes down to this... I think I found the issue:

const textArea = e.currentTarget;
    console.log("Height before: ", textArea.style.height);
    textArea.style.height = "auto";
    if(textArea.style.height === "51px") {
      textArea.style.height = textArea.scrollHeight + "px";
    } else {
      textArea.style.height = textArea.scrollHeight + 25 + "px";
    }
    console.log("Height after: ", textArea.style.height);
 }

If you notice: Kamil, the code: Works but, when I implement it, I get text over my icons. The 25 pushes the icons DOWN 25px. When I delete, the icons are still PUSHED down, 25 px, and the final Height After is 51px.

This is BEFORE with text in the area:

enter image description here

This is AFTER:

enter image description here

I need to DUMP the extra PX to get it back to original configuration like this:

enter image description here

Upvotes: 0

Views: 608

Answers (1)

Peter The Angular Dude
Peter The Angular Dude

Reputation: 1188

Here's the SOLUTION!

  const textArea = e.currentTarget;
    console.log("OffsetHeight before: ", textArea.offsetHeight);
    textArea.style.height = "auto";
    console.log("Height before: ", textArea.style.height);
    if(textArea.style.height === "auto") {
       console.log("Inside if: ", textArea.style.height);
       textArea.style.height = textArea.scrollHeight + "px";
       this.iconscontainer.style.marginTop = "0px";
    }

    if(textArea.style.height === "26px") {
       console.log("Inside else: ", textArea.style.height);
       textArea.style.height = textArea.scrollHeight + "px";
       this.iconscontainer.style.marginTop = "-23px";
    }
    console.log("Height after: ", textArea.style.height);
  }

Upvotes: 1

Related Questions