ブートストラップパネルがMD /スモールデバイスの上部に伸びていて、そこに要素を隠しています

私は非常にシンプルなブートストラップパネルを持っていますが、外部のdiv内で使用しているときは、ブートストラップパネルがMD /スモールデバイスの上部に伸びていて、そこに要素を隠しています

フルスクリーンで表示しているときは、下のフィドルが正しく表示されていますが、ブラウザのサイズを変更したりモバイルモードで表示したりすると、パネルが上に移動して既存のコンテンツを隠すようになります。

<div class="panel panel-info" style="margin-top: 8px!important;"> 
    <div class=""> 
     <button type="button" 
       class="close remove-cart-item update-cart-item" 
       data-dismiss="alert" 
       style="padding-right: 10px"> 
      <span aria-hidden="true">×</span> 
     </button> 
    </div> 
    <div class="panel-body"> 
     <div class="col-sm-5 col-xs-10 nopadding"> 
     More Description : 
      <input type="text" 
        class="form-control textArea" 
        maxlength="10" 
        size="10" 
        placeholder="Enter data Plate"> 
     </div> 
     <div class="col-sm-5 col-xs-10 nopadding"> 
      <select class="form-control textArea licenseStateDD" placeholder="Enter License State"> 
       <option value="TX">TEXAS</option> 
       <option value="UT">UTAH</option> 
      </select> 
     </div>

コードのフルバージョンがon this JSFiddle見つけることができます。

出典

2017-08-15 Rushikesh Joshi

<button type="button" class="close" data-dismiss="modal">×</button>

上記の一部を使用する代わりに、divの部分を追加しないでください。うまくいけば助けになるだろう。試した後、それが働いたら教えてください。開いているパネルのdivの後に入力タグがあるdivを終了する必要があります。

出典

2017-08-16 10:01:42

これは私の問題を解決していません。ブラウザのサイズを変更しているときに、divが上にあり、上のコントロールとミキシングしています。 –

私はパネルのdivの高さが完全な面積をとり、これに応答してリサイズない、あなたがそのようなパネル本体の高さをリセットしようとすることができかもしれないと思う：携帯電話の画面サイズ検出で

.panel-body { 
    height: 75%; 
} 
.panel { 
    height: 90%; 
    overflow: hidden; 
}

が使用して、この高さを適用しますjQueryのは、私はちょうど間に休憩を追加 http://api.jquery.com/resize/

出典

2017-08-16 13:46:26

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script> 
<style type="text/css"> 
.panel-heading h3 { 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
line-height: normal; 
width: 75%; 
padding-top: 8px; 
} 


</style> 
</head> 
<body> 
<label class="transponderSelection nopadding"> 




<div class="col-xs-4 col-sm-2"> 
<img class="img-responsive" id="image_2" alt="Movie" title="Movie"> 
</div> 
    <span id="validateTransponder_0" style="display:none">false</span> 

    <p id="currentTransponderLongDescr_0" style="white-space: normal;"> 
     Releasing soon. 
    </p> 
    <p id="" hidden=""> 
     2 
    </p> 

<div class="selectionArea"> 
    <div class="col-xs-9 col-xs-offset-3 col-sm-10 col-sm-offset-2 numbers-row" style="padding-bottom:15px!important"> 
     <input type="text" style="width: 30px; margin-left: 5px;" > 
    </div> 

    </div> 

    <br> 
<div class="purchase-details col-md-10 col-md-offset-1" > 


<div class="panel panel-info" style="margin-top: 8px!important;"> 
    <div><button type="button" class="close" data-dismiss="modal">&times;</button></div> 

    <div class="panel-body" > 
     <div class="col-sm-5 col-xs-10"> 
      <label class="col-md-12" style="padding-right:0px">License :</label> 
      <div class="control-div col-md-12 col-xs-12 licensePlate" style="padding-bottom:7px"> 
       <input type="text" class="form-control textArea licensePlate" maxlength="10" size="10" placeholder="Enter License Plate"> 
       </div> 
      </div> 



     <div class="col-sm-5 col-xs-10"> 
      <label class="col-md-12" style="padding-right:0px">Plate State:        </label> 
      <div class="control-div col-md-12 col-xs-12" style="padding- bottom:7px"> 
       <select class="form-control textArea licenseStateDD"  placeholder="Enter License State"> 
<option value="TX">TEXAS</option> 
<option value="UT">UTAH</option> 

     </select> 

      </div> 
     </div> 



    </div> 
</div> 

     </div> 





     </body> 
     </html>

サイズを変更します。

出典

2017-08-16 13:58:17

ブートストラップパネルがMD /スモールデバイスの上部に伸びていて、そこに要素を隠しています

答えて

関連する問題