Как заставить PRE расширяться до размера столбца, но не увеличиваться с новыми данными - PullRequest
Новая
       27

Как заставить PRE расширяться до размера столбца, но не увеличиваться с новыми данными

0 голосов
/ 25 сентября 2019

У меня есть карта (1), содержащая две другие карты (2 и 3), использующие столбцы начальной загрузки.Карта № 2 имеет некоторые селекты и другие элементы и меняет свою высоту в зависимости от экрана.Карта № 3 имеет предварительный элемент и несколько кнопок.Я пытаюсь добиться того, чтобы высота обеих колонок, в каждой из которых была одна карточка, была одинаковой.Элемент pre будет получать новые данные динамически, поэтому я хочу, чтобы он имел полосы прокрутки, чтобы данные были читаемыми.Я смог сделать это, указав высоту карты: 

height: 10rem; overflow: auto; display: flex; flex-direction: column-reverse;

Однако мне нужно расширить ее до размера карты 1, который работает, если я установлю высоту на 100%. Так что я хочуон отображается так, как если высота установлена ​​на 100%, но работает как когда высота установлена ​​на определенное значение.Это возможно? 










  
    
      
    

    
      
        
          
            
              
                CARD 2
              
              

                
                  
                    
                    
                      
                    
                  
                

                
                  
                    
                    
                      
                    
                  
                

                
                  
                    
                    
                      
                    
                  
                

                
                  
                    
                    
                      
                    
                  
                

              
            
          

          
            
               CARD 3
1 2 Отправить Очистить

Предварительно с высотой, установленной на 100% (Постоянно расширяется с новыми данными):

https://jsfiddle.net/Fperola/kL17ewpv/17/

Предварительно с высотой, установленной на значение (например, 10rem) (Добавляет полосы прокрутки по мере необходимости, но не реагирует на различные экраны):

https://jsfiddle.net/Fperola/kL17ewpv/16/

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Следуя подходу @Akber Iqbal, я заставил его работать как задумано.Я просто внес в него несколько изменений:

  • Добавлен вызов события, срабатывающий при отображении основной карты, чтобы правильно установить размер карт в 1-й раз:

    $('#collapseOne').on('shown.bs.collapse', function (){ setRelevantHeight(); });

  • Использовал набор, содержащий элементы внутри тела карты 2, которые будут использоваться в качестве ссылки для получения высоты этой карты:

    function setRelevantHeight() { let newHeight = $("#fieldsetcard2").height(); let temp = newHeight + 91; $("#card3").height(temp); let newAdjustedHeight = newHeight - 48; $(".ourClass").height(newAdjustedHeight); }

Вот окончательный код: 

<code><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="mt-1" id="comcard">

  <div class="card">
    <div class="card-header" id="headingOne">
      <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <i class="fas fa-exchange-alt"></i> CARD
      </button>
    </div>

    <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#comcard">
      <div class="card-body">
        <div class="row">
          <div id='card2' class="col-sm col-md-5 col-lg-4 col-xl-3">
            <div class="card h-100">
              <div class="card-header">
                CARD 2
              </div>
              <div class="card-body">

                 <fieldset id="fieldsetcard2">
                  <form>
                    <div class="form-group row">
                      <label for="Select1" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select1">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select2" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select2">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select3" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select3">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>

                  <form>
                    <div class="form-group row">
                      <label for="Select4" class="col-sm-5 col-form-label"> ABCDEFGHIJKL: </label>
                      <div class="col-sm-7">
                        <select class="form-control" id="Select4">
                          <option selected value="0">1</option>
                          <option value="1">2</option>
                        </select>
                      </div>
                    </div>
                  </form>
                </fieldset>

              </div>
            </div>
          </div>

          <div id='card3' class="col-sm col-md-7 col-lg-8 col-xl-9">
            <div class="card h-100">
              <div class="card-header"> CARD 3 </div>
              <div class="card-body d-flex flex-column">
                <div id="temp_id" class="card ourClass" style="overflow-y: scroll; display: flex; flex-direction: column-reverse;">
                  <div class="card-body " id="terminal_div">
                    <pre id="terminal_pre">
1 2 Отправить Очистить

https://jsfiddle.net/Fperola/jLyqa4rs/51/

0 голосов
/ 25 сентября 2019

Я не думаю, что это было возможно с помощью чистого CSS, пришлось вставить jQuery ... Несколько вещей, которые я сделал:

  • назначить идентификатор card2 & card3 & a* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * '*' '*' '' '' '' * '} * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * НЕОБХОДИМО, "*"1015 *

    фрагмент рабочего кода ниже (пожалуйста, запустите его на полной странице, чтобы увидеть эффекты): 

    setInterval(function() {
  $('#terminal_pre').append("123");
  $('#terminal_pre').append("&#10;");
}, 1000);

function setRelevantHeight() {
  var newHeight = $("#card2").height();
  $('#heightHere').text($("#card2").height());
  $("#card3").height(newHeight);
  var newAdjustedHeight = newHeight - 175;
  //console.log("newAdjustedHeight:",newAdjustedHeight);
  $(".ourClass").height(newAdjustedHeight);

}

$(document).ready(function() {
  setRelevantHeight();
})

$(window).resize(function() {
  setRelevantHeight()
});
    







  
    
      
    

    
      
        
          
            
              
                CARD 2
              
              

                
                  
                    
                    
                      
                    
                  
                

                
                  
                    
                    
                      
                    
                  
                

                
                  
                    
                    
                      
                    
                  
                

                
                  
                    
                    
                      
                    
                  
                

              
            
          

          
            
               CARD 3
    1 2 Отправить Очистить это
...