Как разрешить изменение размера содержимого панели до 0

Высота панелей указана с использованием встроенных стилей. Все панели высоты содержимого должны разрешено изменять размер любого значения, начиная с 0Как разрешить изменение размера содержимого панели до 0

Я попытался код ниже, используя

 .panel-resizable { 
      resize: vertical; 
      overflow: auto 
     }

, но не позволяет изменять размер заголовка панели чтобы чем первоначальной высоты.

Как разрешить изменять размеры всех панелей любого размера?

Некоторые jquery, jquery ui другие другие плагины могут использоваться вместо бутстрапа, если он решает проблему.

<!DOCTYPE html> 
 

 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    <style> 
 
     .panel-resizable { 
 
      resize: vertical; 
 
      overflow: auto 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <div class="panel panel-default"> 
 
     <div class="panel-body panel-resizable" style="height:180px"> 
 
     </div> 
 
     <div class="panel-footer">Band1</div> 
 
    </div> 
 

 
    <div class="panel panel-default"> 
 
     <div class="panel-body panel-resizable" style="height:280px"> 
 
     </div> 
 
     <div class="panel-footer">Band2</div> 
 
    </div> 
 
</body> 
 
</html>

источник

2016-01-04 Andrus

Я не могу воспроизвести проблему, я создал JSFiddle и она прекрасно работает, я могу измените его размер до минимума 1px. https://jsfiddle.net/x0gyyp3s/1/ –

Я попробовал вас водить на рабочем столе хром. Это не позволяет уменьшить высоты. Это позволяет только увеличить высоту. В Internet Explorer он не позволяет изменять размер, значок изменения размера не отображается. – Andrus

http://caniuse.com/#feat=css-resize IE не поддерживает свойство resize. –

По какой-то причине (не знает, почему, до сих пор расследование) вы можете отменить браузеры размера min-height (== текущая style.height значения) для перебольшого если вы добавить псевдо класс как это:

.panel-resizable:active { 
    height: 1px; 
}

и удалить жёстко прописанный инлайн style="height:180px;" - начальная высота еще может быть установлена с помощью CSS:

.panel-resizable { 
    resize: vertical; 
    overflow: auto; 
    background-color:#f00; 
    height: 180px; 
}

скрипки от комментариев обновляемого ->https://jsfiddle.net/x0gyyp3s/2/

источник

2016-01-05 15:07:39 davidkonrad

щелкнув внутри panel содержание меняется панель высота до 1px. Как исправить это, чтобы панель сохранила высоту? – Andrus

Я разместил связанный с ним вопрос в http://stackoverflow.com/questions/34644134/how-to-allow-to-resize-panels-on-zero-height Я переключился на jquery-ui, изменяемый по размеру, так как нулевой размер размера по размеру не укладывается в другими способами. – Andrus

Как разрешить изменение размера содержимого панели до 0

ответ

Смежные вопросы