CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TonyMadMax
TonyMadMax

Reputation: 45

jQuery width getting wrong value

I have a problem with the jQuery method .width(). I have 4 different textareas that I need to resize according to the size of a div that contains them, so I call the method .width() to get the actual width of the div (which anyway is 100% of the window) but this method always gets the wrong value even after wrapping everything in a $(window).ready().

Here is the CSS:

#contCode{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    float: left;
    padding: 0;
}
.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
}

This is the HTML:

<div id="contCode">
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <div class="codeArea"></div>
</div>

And this is the script:

$(window).ready(function (){
        var wi = $("#contCode").width(); 
        var wiTex;
        wiTex = (wi) / 4;
        $(".codeArea").width(wiTex);
    });

I have already tried with outerWidth and innerWith and got the same result.

Upvotes: 4

Views: 3945

Answers (4)

Sunny
Sunny

Reputation: 176

There is a line break after the 3rd textarea. Is it because of the CSS3 box-sizing Property? By default it is content-box,which only contains the content itself but not the padding. You need to change it to border-box;

Upvotes: 0

incalite
incalite

Reputation: 3207

Try this!

    #contCode{
        width: 100%;
        height: 500px;
        margin-top: 50px;
        float:left;
        padding: 0;
    }

    .codeArea{
        float: left;
        font-family: "Lucida Console", Monaco, monospace;
        height:100%;
        width:22%; //Added this
        padding:5px 0 0 5px;
        margin: 0;
        border:1px solid #ccc; 
        color:#333; 
        resize: none;
        background-color:#eee;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="contCode">
       <textarea class="codeArea" placeholder="Put your code here"></textarea>
       <textarea class="codeArea" placeholder="Put your code here"></textarea>
       <textarea class="codeArea" placeholder="Put your code here"></textarea>
       <div class="codeArea">Hello World</div>
    </div>

Cheers!

Upvotes: 1

spirit
spirit

Reputation: 3415

just use this:

$(document).ready(function (){
    var wi = $("#contCode").width(); 
    var wiTex;
    wiTex = (wi) / 4;
    $(".codeArea").width(wiTex - 7); //here is the trick =)
});

why i substruct 7 pixels? That's because of how css calculate width of an element.

In css, width equals width + padding + border. In your case, real width of element would be: wiTex + 5px of left padding + 2 pixels of borders

you can even remove javascript code and use this css:

.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
    width: calc(25% - 7px); /* magic =) */
}

You can see it for yourself.

Upvotes: 1

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

I found two issues. The first I knew about

  1. You need to add box-sizing: border-box so that when you set the width of the boxes the border width is included. If you don't, a box set to 100px with a 1px border will actually be 102px wide.

  2. The second issue I found was with jQuery's .width() method. For some reason even when I told it manually to set to .width('100px') the boxes were being set to 112px. I changed it to use vanilla JavaScript instead.

You can see from the demo below that the boxes align now.

$(window).ready(function() {
  var wi = $("#contCode").width();
  var wiTex = (wi) / 4;

  document.querySelectorAll('.codeArea').forEach(function(node) {
    node.style.width = wiTex+'px'
  })
  
});
#contCode {
  width: 100%;
  height: 500px;
  margin-top: 50px;
  float: left;
  padding: 0;
}
.codeArea {
  float: left;
  font-family: "Lucida Console", Monaco, monospace;
  height: 100%;
  padding: 5px 0 0 5px;
  margin: 0;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  resize: none;
  background: #ccc;
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contCode">
  <textarea class="codeArea" placeholder="Put your code here"></textarea>
  <textarea class="codeArea" placeholder="Put your code here"></textarea>
  <textarea class="codeArea" placeholder="Put your code here"></textarea>
  <div class="codeArea">The result area</div>
</div>

Upvotes: 1

Related Questions