CODEWITHSUNDEEP
jqueryhtmlcss
Htlcs
Htlcs

Reputation: 565

CSS scroll bar for a display area

I am very new to CSS HTML. I have a minor problem that I want help on.

I have defined the following tag inside my CSS for a display area to show a set of questions. I drew a static border for my display area but sometimes the text inside the display area exceeds the height and flows out. I want to fix this by adding a scroll bar and define a proper height for my display area. I may still not be clear with my question. So I have inserted an image for reference.

  #disp_desc{
            position: absolute;
            COLOR:cyan;
            font-size:16px;
            font-family: Verdana;
            width: 55%;
            top: 255px;
            left: 215px;
            margin-left: ;
            margin-right: ;
            text-align: left;
            overflow-y: scroll;
   }

<div id="problemform" class="form-inline">
        <textarea id="probleminput" class="form-inline" type="text" style="display: inline;"></textarea>
        <button id="problemsubmit" class="btn" type="submit" style="display: inline-block;">Submit</button>
    </div>

reference iamge

First Contact is my display area. Ignore the content and the input box. I just want the entire text to fit inside the defined border using the scrollbar.

Also I want the scroll bar to be displayed only when the text size is large enough. Otherwise it gets displayed even for content which is 1-2 lines and scroll bar doesn't make sense for the same. Can I control it with CSS?

Upvotes: 0

Views: 265

Answers (2)

PugsOverDrugs
PugsOverDrugs

Reputation: 535

Position: absolute; works pretty wonky, I would recommend looking into Position: relative; That will allow you to do something like this in the HTML:

HTML:

<div class="cyanBox">
    <div id="disp_desc">
        //THIS IS WHERE YOUR TEXT WILL GO
    </div>
</div>

CSS:

.cyanBox
{
    position: relative; //Adjust with margins if needed.
    height: 150px;
    width: 500px;
    overflow: auto;
]

#disc_desc
{
    position: relative;
    height:100%; //Setting position relative with height and width 100% will
    width:100%;  //Cause the description to fill the box, and with overflow Auto
    //Font Styling. //On the box, when it is too long a scroll will be made.
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

Your #disp_desc element has no specified height, and being absolutely positioned it has nothing to assume a height from. Therefore your element isn't restricted in height at all and will continue to grow.

To fix this, simply give it a height:

#disp_desc {
    ...
    height: 100px;
}

Upvotes: 2

Related Questions