CODEWITHSUNDEEP
htmlcss
Michael Blake
Michael Blake

Reputation: 995

Textbox Cut Off

I feel like this is something that's really simple to fix, but I'm just too dumb to figure it out, but I've been Googling for a long time to figure this out. The textbox on the bottom of my page is getting cut off for some reason. I think it has to do with how the body div is set up. Also, if someone could tell me how to get my textarea the same size as the main div, that'd really be nice. JSFiddle

HTML

    <div id="body">
<div id="main">
    <h1>Test</h1>
    <hr />
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
    <div id="controls"><form action="#" method="POST">Enter a Comment: <br /><textarea sizable="false"></textarea><br /><input type="submit" value="submit" /></form></div>
</div>

CSS

#main {
    background-color:white;
    position:relative;
    min-height:300px;
    padding: 20px 20px 20px 20px;
    border-left: 1px grey solid;
    border-right: 1px grey solid;
    border-bottom: 1px grey solid;
}
#main p {
    font-size:20px;
    word-wrap:break-word;
}
#header {
    background-color: #C0C0C0;
    width: 100%;
    border-bottom: 1px solid grey;

}
html, body{
    height: 100%;
}
#body {
margin-left:75px;   
margin-right:75px;
margin-bottom:125px;
margin-top:0;
}
#controls {
    position: absolute;
    display: inline-block;
    width:90%;
    height: 100px;
    overflow: hidden;
    z-index: 0;
} #controls form textarea {
    resize: false;
    width: 100%;
    height: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 0;
}

Upvotes: 0

Views: 2832

Answers (2)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

I just removed this one property from the CSS tab

#controls {
  overflow: hidden;
}

and it worked! You can see the full textarea now.

Here is the updated fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/jRCy3/2/

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

DEMO 

#controls {
        position: absolute;
        display: inline-block;
        width:90%;
        height: 100px;
                 //removed 'overflow:hidden' property
        z-index: 0;
    }

Upvotes: 0

Related Questions