CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
sinusGob
sinusGob

Reputation: 4303

How do I make bootstrap button size (width * height) stay the same if value changes?

My goal is to change the button text to a spinner or to a div, but whenever the value changes the size of the button changes as well. How do I make the button fixed?

$(function() {

  var opts = {
    lines: 9 // The number of lines to draw
      ,
    length: 2 // The length of each line
      ,
    width: 2 // The line thickness
      ,
    radius: 10 // The radius of the inner circle
      ,
    scale: 1 // Scales overall size of the spinner
      ,
    corners: 1 // Corner roundness (0..1)
      ,
    color: '#FFFFFF' // #rgb or #rrggbb or array of colors
      ,
    opacity: 0.25 // Opacity of the lines
      ,
    rotate: 0 // The rotation offset
      ,
    direction: 1 // 1: clockwise, -1: counterclockwise
      ,
    speed: 1 // Rounds per second
      ,
    trail: 60 // Afterglow percentage
      ,
    fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
      ,
    zIndex: 2e9 // The z-index (defaults to 2000000000)
      ,
    className: 'spinner' // The CSS class to assign to the spinner
      ,
    top: '50%' // Top position relative to parent
      ,
    left: '50%' // Left position relative to parent
      ,
    shadow: false // Whether to render a shadow
      ,
    hwaccel: false // Whether to use hardware acceleration
      ,
    position: 'absolute' // Element positioning
  }

  $("#apply").on("click", function() {
    $("#apply").html(new Spinner(opts).spin().el);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter something">
  <span class="input-group-btn">
    <button class="btn btn-success" id="apply" type="button">Apply</button>
  </span>
</div>

Fiddle link: https://jsfiddle.net/dq9b2xcw/1/

Upvotes: 3

Views: 1511

Answers (2)

Adam Mazzarella
Adam Mazzarella

Reputation: 763

The button is collapsing because there is no text content in the button after it is replaced by a spinner. Try adding an invisible character to the button and see if that does the trick in this case:

$("#apply").html(new Spinner(opts).spin().el).append('&nbsp;');

That will maintain the height of single-line text If you want to maintain the width too, just store it off before swapping out the HTML.

var buttonWidth = $('#apply').css('width');
// ... swap html
$("#apply").css('width', buttonWidth);

The same could be applied to height as well if you wanted to be consistent.

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53664

I would wrap the text in an element, and hide it visually using opacity, then either $.append() the spinner code (instead of using $.html()) to the button, or if you're going to toggle the state of the button back and forth so it will go from text to spinner and back, add an element for the spinner and add the spinner to that element instead.

Here's an example.

$(function() {

  var opts = {
    lines: 9 // The number of lines to draw
      ,
    length: 2 // The length of each line
      ,
    width: 2 // The line thickness
      ,
    radius: 10 // The radius of the inner circle
      ,
    scale: 1 // Scales overall size of the spinner
      ,
    corners: 1 // Corner roundness (0..1)
      ,
    color: '#FFFFFF' // #rgb or #rrggbb or array of colors
      ,
    opacity: 0.25 // Opacity of the lines
      ,
    rotate: 0 // The rotation offset
      ,
    direction: 1 // 1: clockwise, -1: counterclockwise
      ,
    speed: 1 // Rounds per second
      ,
    trail: 60 // Afterglow percentage
      ,
    fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
      ,
    zIndex: 2e9 // The z-index (defaults to 2000000000)
      ,
    className: 'spinner' // The CSS class to assign to the spinner
      ,
    top: '50%' // Top position relative to parent
      ,
    left: '50%' // Left position relative to parent
      ,
    shadow: false // Whether to render a shadow
      ,
    hwaccel: false // Whether to use hardware acceleration
      ,
    position: 'absolute' // Element positioning
  }

  $("#apply").on("click", function() {
    $("#apply").find('.text').addClass('invisible').end().find('.spinner').append(new Spinner(opts).spin().el);
  });
});
.invisible {
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter something">
  <span class="input-group-btn">
              <button class="btn btn-success" id="apply" type="button"><span class="text">Apply</span><span class="spinner"></span></button>
  </span>
</div>

Upvotes: 2

Related Questions