CODEWITHSUNDEEP
javascriptjquery
mark
mark

Reputation: 62736

jquery: Maintaining the same button size given changes in the text

I have the following piece of code:

$(document).ready(initialize);

function initialize() {
    $('#btnPoint').css('width', $('#btnPoint').width());
}

When I debug it in Chrome $('#btnPoint').width() is 83 before the width is set. But it becomes 67 immediately after the css statement is executed.

What is going on?

EDIT

I have no particular stylesheets loaded. Here is my html page:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=bla-bla-bla&sensor=false&libraries=geometry">
    </script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="sdr.js"></script>
</head>
  <body>
    <div style="display: table; height: 100%; width: 100%;">
        <div id="data" style="display: table-row; height: 20px;">
            <div style="display: table-cell;">
                <input id="btnPoint" type="button" value="Mark the point" onclick="markPoint()" />
                Point: <input id="txtPoint" type="text" /><br />
                <input id="btnPolygon" type="button" value="Mark the polygon" />
                Polygon:<input id="txtPolygon" type="text" />
             </div>
        </div>
        <div style="display: table-row; ">
            <div id="map_canvas" style="display: table-cell;"></div>
        </div>
    </div>
  </body>
</html>

Upvotes: 4

Views: 1536

Answers (1)

JKirchartz
JKirchartz

Reputation: 18022

jQuery's width() doesn't contain padding or border which are default styles on a button use outerWidth() like:

$('#btnPoint').css('width', $('#btnPoint').outerWidth());

to keep your button the same size, but have the text morph to fit, check out the fitText plugin or fitText on github it's made for large display text, but might work for your needs.

Upvotes: 4

Related Questions