Redimensionner dynamiquement les colonnes dans la grille css de mise en page avec la souris
Je suis en train de redimensionner dynamiquement grille css de mise en page des cases en faisant glisser les séparateurs de colonne (ou redimensionner les espaces réservés) avec la souris.
J'ai mis resize: horizontal;
sur le nav
élément de redimensionner, et il est redimensionnée lorsque je fais glisser la petite poignée de redimensionnement dans le coin en bas à droite de l'élément, mais la largeur de la voisine de la colonne n'est pas réglé automatiquement ce qui conduit à des chevauchements. Voici une fracture de la codepen.
HTML:
<main>
<nav>#1</nav>
<header>#2</header>
<section>#3</section>
</main>
CSS:
main {
display: grid;
border: 3px dotted red;
grid-gap: 3px;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr;
height: 100%;
}
nav {
grid-column: 1;
grid-row: 1;
grid-row: 1 / span 2;
resize: horizontal;
overflow: scroll;
border: 3px dotted blue;
}
Je m'attendais à la grille css moteur pour gérer automatiquement ce cas, mais apparemment il ne fonctionne pas.
J'ai expérimenté avec jquery-ui resizable mais il ne semble pas bien fonctionner avec css grilles.
Je suis à la recherche dans la façon de le faire avec jquery par réglage de la grille de l'attribut grid-template-columns/rows:
à une valeur dynamique, mais il n'est pas clair comment intercepter les événements lancés par le redimensionnement de l'élément via la poignée de redimensionnement. Le jquery redimensionner événement est déclenché uniquement sur le window
objet, et non pas sur des éléments du dom.
Ce qui pourrait être un moyen de le faire sans avoir à gérer de bas niveau les événements de la souris comme dragstart/dragend?
merci! je vais essayer de voir si il peut être adapté à une grille css de mise en page; sinon pourriez avoir à passer à l'aide de flotteurs.
OriginalL'auteur ccpizza | 2017-09-04