CODEWITHSUNDEEP
javascriptjquerycss
Xander
Xander

Reputation: 1011

Make div height respond to content

I have a div which is being filled using .text() method but when I enter a long text entry, the height of the div doesn't respond and the text overflows the div.

I have a textarea and a button, when the button is pressed the value of the text area is inserted into the div.

IMAGE: http://prntscr.com/et5ja5

Things tried:

Height: auto;
display: inline-block;
overflow: visible/auto; etc

FULL EXAMPLE UPON REQUEST

HTML:

<body>
    <div data-role="page" id="article1">
        <div data-role="header" data-theme="a" data-position="fixed">
            <h1>Notes</h1>
        </div>

        <div data-role="content">
            <div id="addContainer">
                <button id="addNoteBtn" data-role="button">Add Note</button>
                <textarea id="noteInput" class="textarea" rows="10" cols="50"></textarea>

                <button id="savenotesbtn" data-role="button">Save</button>-->
            </div>
            <div id="displayContainer"></div>
        </div>
    </div>

</body>

CSS:

#addContainer {
     margin: 20px 20px 50px 20px;
}
 #displayContainer {
     margin: 20px 20px 20px 20px;
}
 .noteDisplay {
     display: inline-block;
     color: white;
     background-color: #96c56f;
     width: 100%;
     padding: 5px, 0px, 5px, 0px;
     border: solid 2px black;
     border-radius: 5px;
     margin-bottom: 5px;
}
 .textarea {
     width: 100%;
     height: 100%;
     font: 1em arial;
     color: rgba(50, 82, 50, 1.0);
}
 .textarea:focus {
     color: rgba(50, 82, 50, 1.0);
     border: 2px solid #96c56f;
     box-shadow: 0px 1px 1px #888888;
}

JS:

$(document).ready(function() {
    var savesnotesbtn = document.getElementById("savenotesbtn");
    var addnotebtn = document.getElementById("addNoteBtn");

    var noteCount = localStorage.getItem("noteCount");

    if (noteCount === null) {
        noteCount = 0;
    }
    addnotebtn.addEventListener("click", addNotes);

    //ADD NOTES
    function addNotes() {
        noteCount++;
        var note = $("#noteInput").val();
        console.log("Note: " + note);
        console.log("Note Count: " + noteCount);
        var display = document.createElement("div");
        document.getElementById("displayContainer").appendChild(display);
        display.className = "noteDisplay";
        display.id = "note" + noteCount;
        $("#note" + noteCount).text(note);

        localStorage.setItem("noteCount", noteCount);
    }
});

Upvotes: 1

Views: 534

Answers (3)

Asons
Asons

Reputation: 87292

Based on a comment from OP, saying it overflows to the right of the div, if one add word-break: break-all to the noteDisplay rule it will break line properly

Updated fiddle

.noteDisplay {
    display: inline-block;
    color: white;
    background-color: #96c56f;
    width: 100%;
    padding: 5px, 0px, 5px, 0px;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 5px;
    word-break: break-all;          /*  added property  */
}

Regarding the difference between break-all and break-word, when text is entered in Chinese, Japanese, and Korean, it is better distributed on each line with break-all

Src: https://www.w3.org/TR/css-text-3/#break-all

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

word-wrap:break-word will solve the problem.

Add this to your

.noteDisplay{word-wrap:break-word}

Upvotes: 0

Xogno
Xogno

Reputation: 112

Try word-wrap: break-word; for the css, that should do the trick.

(providing html code would be useful and an image of the overflowing text)

All you need to know about overflow in css, you can find it here : http://www.codelord.net/2013/08/23/css-tip-overflowing-with-text/.

Here's the working example

$(document).ready(function () {
    var savesnotesbtn = document.getElementById("savenotesbtn");
    var addnotebtn = document.getElementById("addNoteBtn");

    //var noteCount = localStorage.getItem("noteCount");

    if (noteCount === null) {
      var noteCount = 0;
    }


    addnotebtn.addEventListener("click", addNotes);

    //ADD NOTES
    function addNotes() {
        noteCount++;
        var note = $("#noteInput").val();
        //console.log("Note: " + note);
        //console.log("Note Count: " + noteCount);
        var display = document.createElement("div");
        document.getElementById("displayContainer").appendChild(display);
        display.className = "noteDisplay";
        display.id = "note" + noteCount;
        $("#note" + noteCount).text(note);

        //localStorage.setItem("noteCount", noteCount);
    }
});
#addContainer {
    margin: 20px 20px 50px 20px;
}

#displayContainer {
    margin: 20px 20px 20px 20px;
}

.noteDisplay {
    display: inline-block;
    color: white;
    background-color: #96c56f;
    width: 100%;
    padding: 5px, 0px, 5px, 0px;
    border: solid 2px black;
    border-radius: 5px;
    margin-bottom: 5px;
    word-wrap: break-word;
}

.textarea {
    width: 100%;
    height: 100%;
    font: 1em arial;
    color: rgba(50, 82, 50, 1.0);
}

.textarea:focus {
    color: rgba(50, 82, 50, 1.0);
    border: 2px solid #96c56f;
    box-shadow: 0px 1px 1px #888888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="article1">
            <div data-role="header" data-theme="a" data-position="fixed">
                <h1>Notes</h1>
            </div>

            <div data-role="content">
                <div id="addContainer">
                    <button id="addNoteBtn" data-role="button">Add Note</button>
                    <textarea id="noteInput" class="textarea" rows="10" cols="50"></textarea>

                    <button id="savenotesbtn" data-role="button">Save</button>-->
                </div>
                <div id="displayContainer">
                </div>
            </div>

Upvotes: 2

Related Questions