Home/ Questions/Q 7717007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:46:30+00:00

I have the following piece of code: $(document).ready(initialize); function initialize() { $(‘#btnPoint’).css(‘width’, $(‘#btnPoint’).width()); }

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0