Resize DIV

So schnell würde ich die Lösung mit CSS nicht aufgeben. Kann gut sein, dass Du auf ähnliche Probleme stößt, wenn Du das Resizing mit JS oder jQuery(-UI) machst.
Ich habe mal eine neue Demo gemacht mit scrollbaren Containern. Dort funktioniert das Scrollen einwandfrei, sowohl bei dem inneren als auch bei dem äußeren Container:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resize Container</title>
    <style>
        html,
        body {
            height: 100%;
            overflow-y: hidden;
        }

        body {
            display: flex;
            margin: 0;
        }

        .Box {
            /* position: absolute;
            top: 200px;
            left: 200px; */
            width: 200px;
            height: 100px;
            resize: both;
            overflow-x: hidden;
            overflow-y: scroll;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .Box2 {
            flex: 1 0 30%;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .innerBox {
            background-color: lightblue;
            width: 50%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
</head>

<body>


    <div class="Box">
        <div class="innerBox">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet.
        </div>
    </div>
    <div class="Box2">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
        diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit amet.
    </div>

</html>
</head>
 
Guten morgen + danke Dir nochmal!

Das Scrollen ist nicbt das Problem, läuft auch. Sondern die mehrfache Verschachtelung von 18 DIVs, plus weitere DIVs, die außer halb der Box liegen. Da funzt das CSS-resize nicht mehr.

Mit Resize duch die jQuery UI bin ich schon auf nem guten weg.... muß noch die Standardnamen der UI in der UI ändern ( .ui-icon etc. ... )....
 
Hi,
möchte das Thema kurz abschließen: Habs mit der jQuery UI hinbekommen. Das Problemlag darin, dass im Innern eine Daten-DIV mit den Inhalten lag. Dieses muß je nach Resize natürlich mit überwacht, dessen Größen und Scrollbalken beim Resize angepasst werden ( Könnte auch ein IFrame sein ).

War ziemlich deftig... läuft nun aber.
Schwitz...

Danke an

Sempervivum !​

1749054020838.png
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück