Fading text in a Bootstrap popover

Question

I'm currently working on designing a bootstrap popover that will allow users to comment on an aspect of page. The comments will be saved and posted to the top half of the popover. There are two sections to this popover - the comments in the header, and the comment section. The comments on top have to fade out at the bottom. Here's what it should look like:

https://i.sstatic.net/jj7We.png

Here's what my current styling looks like:

https://i.sstatic.net/KAwCa.png

And here's my current markup (hardcoded comments)

<div>
    <div class="popover-title comment-popover-title">
        <div class="popover-title-header">
            ANDREW BARNETT
        </div>
        <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
        . 
        .
        .      
        .
    </div>

    <div class="popover-content comment-popover-content">
        <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

Any idea how to make this happened? Tried to gradient a background but I need something that goes over the text. Not sure, let me know what you think!

Answer 1

You could try the approach used in the link also posted above from jdwallace12.

For instance:

HTML

<div class="wrapper">
    <div class="popover-title comment-popover-title">
        <div class="popover-title-header">
            ANDREW BARNETT
        </div>
        <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.      
    </div>
          <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.      
    </div>  <div id="bottom_fade"></div>
          <div class="popover-title-content">
            Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.      
    </div>

    <div class="popover-content comment-popover-content">
        <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: "Lucida Grande", Georgia, sans-serif;
    font-size: 67.5%;
}

p {
    font-size: 1.1em;
    line-height: 1.6em;
}

#page_wrap {
    width: 600px;
    z-index: 1;
    margin: 10px auto;
    background:#242424;
}

#bottom_fade {
    width: 600px;
    height: 50px;
    z-index: 99;
    position: absolute;
    top: 200px;
    left:0;   
    opacity:0.7;    
    background: url("http://s27.postimg.org/gpnlj01w3/bottom_fade.png") bottom center no-repeat;
}

.wrapper{width:400px; }
.popover-title-content{margin:10px 0 20px 0;}
.popover-textarea{ width:350px; height:200px;}
button{margin-top:20px;}

You can view it on the jsfiddle link below.

Output here: http://jsfiddle.net/7NLzX/

Answer 2

I had to modify your HTML structure a little (and provide working CSS) but here is my try:

HTML:

<div>
    <div class="popover-scroller">
        <div class="popover-title comment-popover-title">
            <div class="popover-title-header">
                ANDREW BARNETT
            </div>
            <div class="popover-title-content">
                Lorem ipsum dolor sit amet, his cu nominavi laboramus, cam impedit intellegam eu. Mel iudico adversarium ex, ut est choro.
            </div>
        </div>
    </div>
    <div class="popover-fade"></div>
    <div class="popover-newcomment">            
        <div class="popover-content comment-popover-content">
            <textarea class="popover-textarea" placeholder="Type a comment" onkeyup="Domain.Common.textCounter(this, '.count', 200);"></textarea>
        <div class="count">Remaining Characters: 200</div>
        <button type="submit" class="btn btn-default save-button save-button-inline-comment">SUBMIT</button>
    </div>
</div>

CSS:

* {
    background: #202020;  
    color: #ffffff;
}

.popover-scroller {
    overflow-y: scroll;
    width: 10em;
    height: 5em;
}

.popover-fade {
    position:relative;
    height: 1em;
    bottom: 1em; /* same as the height */
    background: linear-gradient(rgba(32,32,32,0), rgba(32,32,32,255));
    width: 10em; /* same as the scroller width */
}

The biggest downside to this is the shadow overlaying the scrollbar at the bottom, but hopefully this will get you on the right track.