JS：相対位置を動的に追加するときに位置を展開する絶対親

Question

「次へ」と「戻る」の画面を左右にスライドさせるために絶対配置されたコンテナを使用しています。 http://opencdesign.herokuapp.com/offer

問題がある第2画面に移動するには、「取得」をクリックします。 [項目やカテゴリを追加]をクリックすると、入力がフッターを超えて拡大されます。

入力を追加すると、ウィンドウの高さを拡大する最も簡単な方法は何ですか？私は、絶対位置付けを使用するよりも、画面を左右にスライドさせる別の方法にもオープンしています。

HTML

<div id="offer-2"> 
     <div class="row one-margin-bottom"> 
     <div class="small-12 medium-11 small-centered columns"> 
      <h5 class="">What share of purchases will you accept in Currents?</h5> 
      <!-- <a class="offer-info-popup_open"><i class="half-margin-right fa fa-lg fa-question-circle"></i>How it works</a> --> 
     </div> 
     </div> 

     <div class="row left"> 
     <div class="small-12 medium-6 small-centered columns"> 
      <div class="row"> 
      <div class="input-left small-3 columns"> 
       <p><strong><img class="" src="{% static 'img/symbol-navy.svg' %}"/> share</strong></p> 
      </div> 

      <div class="input-right small-9 columns"> 
       <p id="item-title"><strong>Item or category</strong></p> 
      </div> 
      </div> 
     </div> 
     </div> 

     <div class="row"> 
     <div class="small-12 medium-6 small-centered columns"> 
      <div id="item-1" class="row collapse"> 
      <div class="input-left small-3 columns"> 
       <div class="relative"> 
       <input name="discount-amount-1" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/> 
       <span class="input-icon-right">%</span> 
       </div> 
       <!-- <span class="input-sizer"><select name="discount-type-1"> 
       <option selected>% of</option> 
       <option>$ of</option> 
       </select></span> --> 
      </div> 

      <div class="input-right small-9 columns"> 
       <div class="fit-left half-margin-top one-margin-right one-margin-left">of</div> 
       <div class="relative input-sizer"> 
       <input name="item-name-1" type="text" placeholder="Item or category name" value="All products" class="good-cat" /> 
       <i class="remove-input alert fa fa-times"></i> 
       </div> 
      </div> 
      </div> 

      <div id="item-2" class="row collapse"> 
      <div class="input-left small-3 columns"> 
       <div class="relative"> 
       <input name="discount-amount-2" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/> 
       <span class="input-icon-right">%</span> 
       </div> 
       <!-- <span class="input-sizer"><select name="discount-type-1"> 
       <option selected>% of</option> 
       <option>$ of</option> 
       </select></span> --> 
      </div> 

      <div class="input-right small-9 columns"> 
       <div class="fit-left half-margin-top one-margin-right one-margin-left">of</div> 
       <div class="relative input-sizer"> 
       <input name="item-name-2" type="text" placeholder="Item or category name" value="All services" class="good-cat" /> 
       <i class="remove-input alert fa fa-times"></i> 
       </div> 
      </div> 
      </div> 

      <a id="add-item" class=""><i class="half-margin-top fa fa-plus-circle half-margin-right"></i>Add item or category</a> 

      <div class="row one-margin-top"> 
      <a class="prev-offer button round secondary">Back</a> 
      <a class="next-offer button round">Next</a> 
      </div> 
     </div> 
     </div> 
    </div> 

JS

var id = 3 

    $('#add-item').click(function(){ 
     $(this).before('<div id="item-'+id+'" class="row collapse hidden"><div class="input-left small-3 columns"><div class="relative"><input name="discount-amount-'+id+'" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/><span class="input-icon-right">%</span></div></div><div class="input-right small-9 columns"><div class="fit-left half-margin-top one-margin-right one-margin-left">of</div><div class="relative input-sizer"><input name="item-name-'+id+'" type="text" placeholder="Item or category name" /><i class="remove-input alert fa fa-times"></i></div></div></div>'); 
     $('#item-'+id+'').slideDown(); 

     id ++ 
    }); 

Answer 1

私はあなたの場合、あなたが潜在的に、CSSルールにDIVをターゲットとscrollとそのoverflow-yを扱う（またはそのサイズを増やすことができると思いますそれを展開したい）。 jQueryを使った簡単な例として、$('#mydiv').css("overflow-y", "scroll");の後に条件を付けることができます（divには現在IDまたはカスタムClassnameがあるように見えませんので、自由に変更してください）。

また、このアイテムの親である2番目の非表示のdivを使用して、非表示のdivを展開することもできます。相対的なサイズを使用すると、目に見えない親に=を入力することができます。

これはいいですね。