CODEWITHSUNDEEP
htmlcssoverflow
Nav
Nav

Reputation: 103

A query in CSS overflow porperty

I am working on a TODO kind of web app. And I have an issue

<div class="todo-list">
        <div class="item">
            <p> Buy Raw materials </p>
            <form action="/" method="POST">
                <button type="submit">X</button>
            </form>
        </div>
        <div class="item">
            <p> Cook food </p>
            <form action="/" method="POST">
                <button type="submit">X</button>
            </form>
        </div>
        <div class="item">
            <p> eat food </p>
            <form action="/" method="POST">
                <button type="submit">X</button>
            </form>
        </div>
        <form action="/" method="post" class="add-item">
           <input type="text" name="newItem" id="newItem" placeholder="New item" autocomplete="off">
           <button type="submit">Add</button>
        </form>

There are 2 components first is the the div with class todo-list and second is a form.

now whenever I type something in the input feild and click add, It should be added as item in todo-list div. Which I have done using node and express

Now the issue is since this is dynamic, Initially there will be no Items in div with class todo-list and the form with input will be on the top. And as we go on adding items, They should be added into the todo list div. And it so happens that after a certain number of items added, the height of the todo list increases and crosses the viewport height.

But what i want is, until there are 5 items in the todo-list it is fine, But as soon as 6th item gets added the scroll bar should appear.

So i wrote the following CSS code for todo-list div

.todo-list{
    margin-top: 1rem;
    background-color: #f1f1f1;
    width: 100%;
    height: 425.200px;
    border: 2px solid grey;
    border-radius: 16px;
    box-shadow: 2px 2px 4px 1px gray;
    overflow: auto;

}

But the overflow property doesnt work untill a height property is given to that div. But if a certain height(say height equal to that of 5 items is given to the todo list div) then this problem occurs: Screen shot of the issue

That is the height of the last element if way more than it should be!..

Can some one please help

Upvotes: 1

Views: 48

Answers (2)

shiva rao
shiva rao

Reputation: 172

try providing the max height property

.todo-list {
    margin-top: 1rem;
    background-color: #f1f1f1;
    /* change this */
    width: 100%;
    max-height: 425.200px;
    border: 2px solid grey;
    border-radius: 16px;
    box-shadow: 2px 2px 4px 1px gray;
    overflow: auto;
}

Upvotes: 2

Sigurd Mazanti
Sigurd Mazanti

Reputation: 2395

You need to change your height styling from a fixed number to percentage. If you think your bottom form element is too close to your search bar, give it some margin-bottom

.todo-list {
    margin-top: 1rem;
    background-color: #f1f1f1;
    /* change this */
    width: 100%;
    height: 425.200px;
    border: 2px solid grey;
    border-radius: 16px;
    box-shadow: 2px 2px 4px 1px gray;
    overflow: auto;
}

Upvotes: 0

Related Questions