2

I'm trying to take the size (width) of a bootstrap button, but I have some strange behaviors.

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <button type="button" class="btn btn-warning btn-sm">
             <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Save This Item
        </button>
    </div>
</div>

jquery

var siHeight = $('button').innerHeight();
var siWidth = $('button').innerWidth();

$('button').on('click', function() {

   var iHeight = $('button').innerHeight();
   var iWidth = $('button').innerWidth();

   alert("On click H x W" + iHeight + " x " + iWidth + " Before click H x W " + siHeight + " x " + siWidth);

});
  1. The innerWidth does not equal if taken before or after the button click event
  2. The behavior is different for each browser used (IE10, Firefox. Chrome)

Bootply

Can I get the same size before and after the click event with crossbrowser solution ? Thanks

isherwood
  • 58,414
  • 16
  • 114
  • 157
Gus
  • 913
  • 2
  • 15
  • 30

2 Answers2

1

You will have to add some CSS to make the button not change when you click it:

.btn:focus,.btn:active {
     outline: none !important;
}

Bootply of edited code with css

d-unit
  • 190
  • 3
  • 11
  • Unfortunately with firefox and chrome the behavior does not change – Gus Jun 16 '15 at 14:48
  • Do you have to use innerWidth() and innerHeight()? If you just use width() and height() you will get consistent results with added css. – d-unit Jun 16 '15 at 14:57
  • Unfortunately it is not true what you say. I used the height and width but with chrome or firefox the result is different http://www.bootply.com/ljxHqnfrKO – Gus Jun 16 '15 at 18:34
0

The problem with "not equal before and after" is because css styles :active, :focus , :hover has outline. In such cases you had better use the developer tools and check your css codes when :active, :focus, :hover.

if you don t know how to check on dev tools

On the other hand, you can simply use width instead of innerWidth.

FurkanO
  • 7,100
  • 5
  • 25
  • 36