更改内容时更改大小的停止按钮

时间:2015-08-04 22:38:17

标签: jquery html css

我试图让我的提交按钮在单击时切换到Font Awesome微调器。但是,当我这样做时,按钮变得非常小,看起来不太舒服。如何修复以防止按钮变小?



function refreshreplace() {
  $("#CMSub").html('<i class="fa fa-refresh fa-spin"></i>');
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-dialog text-muted">
  <div class="modal-content">
    <div class="modal-header">
      <button class="close" data-dismiss="modal" type="button"><span>&times;</span>
      </button>

      <h4 class="modal-title" id="myModalLabel">Contact me</h4>
    </div>

    <div class="modal-body">
      <p>Your name:</p>
      <input type="username" id="CMU" name="username">
      <br>
      <br>
      <p>Your email:</p>
      <input type="email" id="CME" name="email">
      <br>
      <br>
      <p>Your comment/message</p>
      <input type="comment" id="CMC" name="comment">
      <br>
      <br>
      <div class="text-centered">
        <button class="btn btn-sm btn-success" id="CMSub" onclick="refreshreplace()">Submit</button>
      </div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-success" data-dismiss="modal" type="button" onclick="alert('You clicked the tick');"><span class="glyphicon glyphicon-ok"></span>
      </button>
      <button class="btn btn-danger" data-dismiss="modal" type="button" onclick="alert('You have clicked exit');"><span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

View on Codepen

2 个答案:

答案 0 :(得分:0)

只需将其添加到您的css中,以防止按钮的大小减小到特定值以下:

#CMSub {
    min-width: 60px;
}

这是一个带有代码的代码集:http://codepen.io/anon/pen/pJGyWy

答案 1 :(得分:0)

如果在将对象插入文档之前创建对象,则在添加对象之前不会闪烁。

同样,您可以使用JavaScript将大小设置为现有大小,以便在内容更改时不会发生变化。这样,如果用户具有覆盖字体大小的设置(通常是出于可访问性原因),则大小将是正确的。

Demo

import activities.Home;
import android.app.Activity;
import android.content.Intent;
import android.view.View;

public class HomeButtonListener implements View.OnClickListener 
{
    Activity activity;

    public HomeButtonListener( Activity activity ) 
    {
        this.activity = activity;
    }

    @Override
    public void onClick(View v) 
    {
        Intent intent = new Intent(activity, Home.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
        activity.startActivity(intent);
    }

}