Scrollbar w niezdefiniowanych wielkościowo gridach

Question

Cześć

Szukam rozwiązania mojego problemu, który przejawia się tym, że dodając elementy do mojej strony za pomocą JS mój konterner rośnie. Jest on ustawiony na stałą wielkość %, a wszystko jest dostosowane pod wielkości vw i vh.

Wiem, że gdybym zastosował tam sztywne pixele to mógłbym użyć opcji overflow:auto i scroll powinien się pojawić, ale nie chciałem zostać przy moim rozwiązaniu.

Chyba, że macie lepsze dzięki któremu nie rozpadnie mi się strona.

:root{
  --green:#17EAD0;
  --blue:#0055aa;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  background: linear-gradient(to left top, var(--blue),var(--green));
  overflow: hidden;
  text-align: center;
  font-size: 18px;
}
.background{
  width:100vw;
  height: 100vh;
  display:grid;
  grid-template-rows: [site-header] 8% [content]auto [footer] 12%;
}
/* logo */
.site-title{
  font-size: 60px;
  font-family: 'Nabla', cursive;
  text-shadow: 5px 5px 5px rgba(66, 68, 90, 1);
}
a{
  text-decoration: none;
}
.site-title a:hover{
  font-size: 61px;
}
/* content */
.content{
  display: grid;
  place-items: center;
}
.main-content{
  width:70%;
  height: 90%;
  background: linear-gradient(to left top,  rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  border-radius:20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: grid;
  overflow:hidden;
  grid-template-rows: [panel] 11%[todo-container] auto;
}
/* panel górny */
.panel{
  display: grid;
  margin:8px;
}
.hello{
  font-size: 43px;
  font-family: 'Lobster', cursive;
  justify-content: center;
  align-items: center;
}

footer{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  padding: 10px 30px;
  background: linear-gradient(to left top,  rgba(0,0,0,0.45), rgba(0,0,0,0.1));
  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); 
}
.div1 { grid-area: 1 / 1 / 3 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 4; }
.div3 { grid-area: 1 / 4 / 2 / 5; }
.div4 { grid-area: 1 / 5 / 2 / 6; }
.div5 { grid-area: 2 / 3 / 3 / 6; }





.task-container{
display:grid;
grid-template-columns: [status]25% [status]25% [status]25% [status]25%;
}
.status {
  background-color: rgba(0, 0, 0, 0.5);
}
.status:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.3);
}
.task-header{
height: 60px;
background-color: #143F49;
line-height: 55px;
}
h2.header-txt{
  height: 100%;
  width: 100%;
  border-bottom: 4px solid black;
  border-top: 1px solid black;
  color: white;
}
#add_btn {
  background: #079b8d;
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  padding:15px;
  width: 80%;
  margin:15px 0;
  border:none;
  transition:0.2s;
}
#add_btn:hover {
  background: #08ac9e;
}
.todo{
  display:grid;
  grid-template-columns: [todo_text]90% [close] auto;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  color:white;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  padding: 10px;
  border-radius:10px;
  margin-top:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
  overflow: hidden;
}
.todo:hover{
  cursor: pointer;
}
.todo .close:hover{
  cursor: pointer;
  color:#143F49;
}

.close-modal {
  display: flex;
  justify-content: flex-end;
  background: none;
  border: none;
  font-size: 1.5rem;
}
.modal {
  width: 450px;
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translate(-50%,60%);
  transition: top 0.3s ease-in-out;
  border-radius: 10px;
  z-index: 2;
  background-color: rgba(250, 250, 250, 0.7);
  -webkit-transform: translate(-50%,60%);
  -moz-transform: translate(-50%,60%);
  -ms-transform: translate(-50%,60%);
  -o-transform: translate(-50%,60%);
}
.modal.active {
  top: 10%;
}
.modal .header {
  display: grid;
  grid-template-columns: [title] 90% [btn] auto;
  padding:10px;
  border-bottom: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0.1);
}
.modal .title{
  line-height: 40px;
  font-size: 24px;
}
.modal .btn{
  display: flex;
  justify-content: center;
  font-size:30px;
}
.modal .btn:hover{
  color:white;
  cursor: pointer;
}
.modal .body {
  padding:20px;
}
#todo_submit{
  width: 80%;
  background: #079b8d;
  border-radius: 15px;
  color: #ffffff;
  cursor: pointer;
  font-size: 25px;
  font-weight: bold;
  padding:15px;
  border:none;
  transition:0.2s;
  margin-top:10px;
}
#todo_submit:hover{
  background: #08ac9e;
}
#todo_input{
  width:80%;
  height: 50px;
  border-radius: 15px;
  margin: 10px;
  border: none;
  font-size: 20px;
  padding: 10px;
  background: rgba(0,0,0,0.4);
  color: white;
}

<!DOCTYPE html>
<html lang="pl-PL">
<head>
    
    <meta charset="UTF-8" />
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
    <title>tytuł</title>
    
    <link rel="stylesheet" href="style/kanban.css">
    <script src="script/kanban.js" defer></script>

    <!-- font-family: 'Courgette', cursive; -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">

    <!-- font-family: 'Nabla', cursive; -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nabla&display=swap" rel="stylesheet">

    <!-- font-family: 'Lobster', cursive; -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

</head>

<body>
    <div class="background">
<!-- Site header -->
        <section class="site-header">
            <header class="site-branding">
                <h2 class="site-title"><a class="test" href="Index.html">AlphaMind</a></h2>
            </header>
        </section>

<!-- Site content panel -->

        <section class="content">
            <main class="main-content">
                <section class="panel">
                    <header class="greate">
                        <h1 class="hello">Lista zadań</h1>
                    </header>
                </section>
                

<!-- Site content nav --> 

                <div class="modal" id="todo_form">
                    <div class="header">
                        <div class="title">Add Todo</div>
                        <button class="btn close-modal">&times;</button>
                    </div>
                    <div class="body">
                        <input type="text" placeholder="Twoje zadanie"id="todo_input" />
                        <input type="submit" value="Add Todo" id="todo_submit" />
                    </div>
                </div>

                <!-- todo -->

                <secion class="task-container">

                    <div class="status" id="no_status">
                        <header class="task-header">
                            <h2 class="header-txt">Domyślne</h2>
                        </header>

                        <button id="add_btn" data-target-modal="#todo_form">Add Todo</button>

                    </div>

                    <div class="status">
                        <header class="task-header">
                            <h2 class="header-txt">Do zrobienia</h2>
                        </header>
                    </div>

                    <div class="status">
                        <header class="task-header">
                            <h2 class="header-txt">W toku</h2>
                        </header>
                    </div>

                    <div class="status">
                        <header class="task-header">
                            <h2 class="header-txt">Ukończone</h2>
                        </header>
                    </div>
                </secion>

            </main>
        </section>

<!-- Site footer -->

        <footer>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
            <div class="div1"></div>
        </footer>
    </div>
</body>
</html>

const todos = document.querySelectorAll(".todo");
const all_status = document.querySelectorAll(".status");
let draggableTodo = null;

todos.forEach((todo) => {
  todo.addEventListener("dragstart", dragStart);
  todo.addEventListener("dragend", dragEnd);
});

function dragStart() {
  draggableTodo = this;
}

function dragEnd() {
  draggableTodo = null;
}

all_status.forEach((status) => {
  status.addEventListener("dragover", dragOver);
  status.addEventListener("dragenter", dragEnter);
  status.addEventListener("dragleave", dragLeave);
  status.addEventListener("drop", dragDrop);
});

function dragOver(e) {
  e.preventDefault();
}

function dragEnter() {
  
}

function dragLeave() {
  
}

function dragDrop() {
  this.appendChild(draggableTodo);
}

/* modal */
const btns = document.querySelectorAll("[data-target-modal]");
const close_modals = document.querySelectorAll(".close-modal");

btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    document.querySelector(btn.dataset.targetModal).classList.add("active");
  });
});

close_modals.forEach((btn) => {
  btn.addEventListener("click", () => {
    const modal = btn.closest(".modal");
    modal.classList.remove("active");
  });
});



/* create todo  */
const todo_submit = document.getElementById("todo_submit");

todo_submit.addEventListener("click", createTodo);

function createTodo() {
  const todo_div = document.createElement("div");

  todo_div.classList.add("todo");
  todo_div.setAttribute("draggable", "true");

/* create p  */
  const pref = document.createElement("p");

  pref.classList.add("todo_text");

  const input_val = document.getElementById("todo_input").value;
  const txt = document.createTextNode(input_val);
  pref.appendChild(txt);

  /* create span */
  const span = document.createElement("span");
  const span_txt = document.createTextNode("\u00D7");
  
  span.classList.add("close");
  span.appendChild(span_txt);

  todo_div.appendChild(pref);
  todo_div.appendChild(span);

  no_status.appendChild(todo_div);

  span.addEventListener("click", () => {
    span.parentElement.style.display = "none";
  });

  todo_div.addEventListener("dragstart", dragStart);
  todo_div.addEventListener("dragend", dragEnd);

  document.getElementById("todo_input").value = "";
  todo_form.classList.remove("active");
}

const close_btns = document.querySelectorAll(".close");

close_btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.parentElement.style.display = "none";
  });
});

 

Answer 1

W 

.main-content{
  width:70%;
  height: 70vh;
  ...
  grid-template-rows: [panel] 11% [todo-container] 89%;
}

i w

.status {
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

tylko, że teraz scrollbar jest na cały kontener (div) o klasie status

<div class="status" id="no_status">
  ...
</div>

dodałbym dodatkowy kontener na Todo-sy (czerwona ramka) pod przyciskiem, żeby scrollbar był tylko w tym kontenerze.

 

 

BTW, czemu po naciśnięciu

nie usuwa (np. element.remove() ) się tylko ustawia display: none;

<div class="todo" draggable="true" style="display: none;"></div>

to jest zamierzone?

Comments

Super!

Dziękuję Ci bardzo za pomoc!

JS już zmieniłem, masz rację lepiej usunąć element :)

Pobawię się jeszcze z tymi divami na scrolla, ponieważ i tak bym musiał je wszędzie umieścić żeby sprawdzić jak to będzie wyglądać.

---

BTW, może się przyda: scrollbar css [ 1 ] [ 2 ] 

---

@VBService, 

Cześć jeszcze raz.

Ogółem Twój pomysł z utworzeniem dodatkowym konternerów na todo aby mieć scrollbar super mi się spodobał, ale natknąłem się na problem. 

Chodzi o to, że tworząc nowy div wewnątrz musiałem ustawić, aby todo tworzyły się w nim, ale po przeciągnięciu elementy uciekają pod ten div. 

Nie wiem za bardzo co zrobić z tym błędem. 

---

Ten kod js-a odpowiada za drag&drop w Twoim kodzie

const all_status = document.querySelectorAll(".status");

all_status.forEach((status) => {
  status.addEventListener("dragover", dragOver);
  status.addEventListener("dragenter", dragEnter);
  status.addEventListener("dragleave", dragLeave);
  status.addEventListener("drop", dragDrop);
});

<div class="status">
    <header class="task-header">
        <h2 class="header-txt">Do zrobienia</h2>
    </header>
</div>

.status {
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid red; /* ramka na obrazku */
}

kontenerami dla drag&drop są div-y o klasie status

 

coś w tym stylu powinno załatwić sprawę obsługi drag&drop dla dodatkowych kontenerów.

<div class="status" id="no_status">
  <header class="task-header">
    <h2 class="header-txt">Domyślne</h2>
  </header>

  <button id="add_btn" data-target-modal="#todo_form">Add Todo</button>
  <div class="drop default"></div>
</div>

<div class="status">
  <header class="task-header">
    <h2 class="header-txt">Do zrobienia</h2>
  </header>
  <div class="drop"></div>
</div>

<div class="status">
  <header class="task-header">
    <h2 class="header-txt">W toku</h2>
  </header>
  <div class="drop"></div>
</div>

<div class="status">
  <header class="task-header">
    <h2 class="header-txt">Ukończone</h2>
  </header>
  <div class="drop"></div>
</div>

.drop.default {
  width: 100%;
  height: 60%;
  /*border: 5px solid green;*/
  overflow-y: auto;
}
.drop {
  width: 100%;
  height: 80%;
  /*border: 5px solid green;*/
  overflow-y: auto;
}
/* ewentualne stylowanie dla scrollbar-a dla kontenerów */
.drop::-webkit-scrollbar-thumb {
  background-color: #013f6f;
}
.drop::-webkit-scrollbar-track {
  background-color: #046bb0;
}
.drop::-webkit-scrollbar-corner {
  background-color: #013f6f;
}
.drop::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

const all_status = document.querySelectorAll(".drop");

all_status.forEach((status) => {
  status.addEventListener("dragover", dragOver);
  status.addEventListener("dragenter", dragEnter);
  status.addEventListener("dragleave", dragLeave);
  status.addEventListener("drop", dragDrop);
});

const no_status = document.querySelector('#no_status .drop');
no_status.appendChild(todo_div);

---

Proponowałbym Tobie przebudować tabelkę np.

w ten sposób masz oddzielone nagłówki od strefy drag&drop, bez większej komplikacji kodu html.

[ on-line ]

<div class="container-table-to-do">
  <div class="main-header-to-do-list"></div>

  <div class="header-default"></div>
  <div class="header-to-do"></div>
  <div class="header-in-progress"></div>
  <div class="header-completed"></div>

  <div class="button-add-to-do"></div>

  <div class="status-default"></div>
  <div class="status-to-do"></div>
  <div class="status-in-progress"></div>
  <div class="status-completed"></div>
</div>

.container-table-to-do {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 0.5fr 0.5fr 4.5fr;
  gap: 1px 1px;
  grid-auto-flow: row;
  grid-template-areas:
    "main-header-to-do-list main-header-to-do-list main-header-to-do-list main-header-to-do-list"
    "header-default header-to-do header-in-progress header-completed"
    "button-add-to-do status-to-do status-in-progress status-completed"
    "status-default status-to-do status-in-progress status-completed";

  width: 80vw;
  height: 80vh;
  margin: 2em auto;
  overflow: hidden;
}

...