jquery: Maintaining the same button size given changes in the text
Question
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>
1 answers
solution1
4 ACCPTED 2012-03-29 17:47:32
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.