Menu
How to allow to change panel height by dragging panel footer using mouse.
I tried resize: vertical style in code below but it does not allow to drag panel footer.
<!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;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body panel-resizable" style="height:80px">
</div>
<div class="panel-footer">Band1</div>
</div>
<div class="panel panel-default">
<div class="panel-body panel-resizable">
</div>
<div class="panel-footer">Band2</div>
</div>
</body>
</html>
326
you need to add overflow: auto; ( in case if you want to hide your overflow just make the overflow:hidden; )
working here
<!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:80px">
</div>
<div class="panel-footer">Band1</div>
</div>
<div class="panel panel-default">
<div class="panel-body panel-resizable">
</div>
<div class="panel-footer">Band2</div>
</div>
</body>
</html>Resize does not work without setting the overflow.
.panel-resizable {
resize: vertical;
overflow: hidden;
}
https://jsfiddle.net/qd3236no/
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
