Comment faire de bootstrap panneaux redimensionnables

Comment permettent de changer la hauteur du panneau en le faisant glisser le panneau de pied de page à l'aide de la souris.

J'ai essayé resize: vertical style dans le code ci-dessous, mais elle ne permet pas de faire glisser le panneau de pied de page.

<!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>
InformationsquelleAutor Andrus | 2016-01-04
  1. 6

    vous devez ajouter overflow: auto; ( dans le cas où si vous souhaitez masquer votre débordement juste faire le overflow:hidden; )
    le fait de travailler ici

    HTML:

    <!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>

    • Je vous remercie. Comment redimensionner le panneau en le faisant glisser le panneau de pied de page dans n'importe quel endroit ? Dans cet exemple de redimensionner peut effectuées uniquement à l'aide du panneau de contenu coin en bas à droite.
    • quelque chose comme ceci i.imgur.com/bWYUaj8.png ?
    • Oui. Ensemble de panneau de pied de page peut être utilisée pour redimensionner
    • Il ne permet pas de changer la hauteur inférieure à celle indiquée dans style="height:80px" Comment résoudre ce problème de manière que le panneau de contenu peut redimensionnée à hauteur est égale à zéro ?
    • vous pouvez le vérifier sur ce lien si vous souhaitez redimensionner, tandis que le panneau de viralpatel.net/blogs/demo/...
    • Si le deuxième panneau hauteur est spécifiée, elle ne permet pas de redimensionner à tous. Sans second panneau hauteur, il ne permet pas de redimensionner à 0 contenu de la hauteur. Je l'ai posté dans stackoverflow.com/questions/34601106/...

    InformationsquelleAutor Gintoki
  2. 2

    Redimensionner ne fonctionne pas sans réglage de la zone de débordement.

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

    https://jsfiddle.net/qd3236no/

    • Ce violon ne permet pas de diminuer le contenu du panneau hauteur. Dans Internet explorer, il ne permet pas de redimensionner à tous. Comment résoudre ce problème ? Je l'ai posté en tant que question distincte dans stackoverflow.com/questions/34601106/...
    InformationsquelleAutor Sean Wessell
  3. 0

    Vous ne pouvez redimensionner si le dépassement est quelque chose, comme ceci:
    https://jsfiddle.net/qvw69r5L/

    overflow:hidden;
    • Ce violon ne permet pas de diminuer la hauteur du panneau. Dans Internet Explorer, il ne permet pas de redimensionner. Comment résoudre ce problème ?
    • Internet Explorer ne prend pas en charge le redimensionnement de la propriété. Vous devez utiliser quelque chose comme jQueryUI pour obtenir cet effet dans n'importe quelle version de IE, y compris à Bord à ce moment.
    InformationsquelleAutor Andrew Adam