2016-08-26 7 views
-1

私のCCSコードに関する質問があります。 ローディングバー(ボタンをクリックしたときに表示される)の上にボタンがあります。CSSとマテリアライズ

ボタンを押すと、ローディングバーが表示されますが、ボタンが押し下げられ、ボタンが固定の位置に移動しようとしました。

別の方法があるかどうか、自分のコードに解決策を教えてもらえますか?

ボタンとロードバーと私のHTMLコード:

 <div class="row"> 
     <div class="col s12 m8 l6"> 
      <div id="loader" class="center"></div> 
      <a id="submitForm" class="btn green waves-effect waves-light">Add Contact 
       <i class="material-icons right">add</i> 
      </a> 
     </div> 
    </div> 

これは、ボタンの私のCSSで、.btnセレクタは、マテリアライズからのクラスです:

.btn{ 
    background-color: #88969c !important; 
    position: fixed !important; 
    margin-top: 100px; 
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/> 
 
     <div class="row"> 
 
      <div class="col s12 m8 l6"> 
 
       <div id="loader" class="center"></div> 
 
       <a id="submitForm" class="btn green waves-effect waves-light">Add Contact 
 
        <i class="material-icons right"></i> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    <script> 
 
     (function() { 
 

 
      $('#submitForm').on('click', function (e) { 
 
       e.preventDefault(); 
 

 
       if($("#submitForm").hasClass('disabled')){ 
 
        return; 
 
       } 
 

 
       $('#submitForm').addClass('disabled'); 
 

 
       var randId = Math.floor((Math.random() * 19990307) + 1); 
 
       $('#loader').append('<div id="'+ randId +'" class="progress"><div class="indeterminate"></div></div>'); 
 

 
       var name = $("#name").val(); 
 
       var phonenumber = $("#phonenumber").val(); 
 

 
       $("#name").val(''); 
 
       $("#phonenumber").val(''); 
 

 
       var data = { 
 
        name: name, 
 
        phonenumber: phonenumber 
 
       }; 
 

 
       $.ajax({ 
 
        url: 'addNew', 
 
        data: data, 
 
        method: 'post', 
 
        success: function (data) { 
 
         Materialize.toast(' '+ data +' ', 4000, 'cool white-text'); 
 
         console.log(data); 
 
         $('#'+ randId +'').fadeOut(150, function() { 
 
          $('#'+ randId +'').remove(); 
 
          $('#submitForm').removeClass('disabled'); 
 
         }); 
 
        }, 
 

 
       }) 
 

 
      }) 
 

 
     })(); 
 
     </script>

答えて

0

まずは.btn { position: static; }。だからロードバーが来るときにbtnもそれ自身を下にシフトさせます。そしてこれを起こすために(シフトして、すべて)。あなたはjavascriptまたはjqueryを使用する必要があります。

関連する問題