Comment bubble shenanigans

HTML & CSS
1

Hi there everyone!

I used a text bubble generator to make some comment divs. The generator created a rounded comment box with a little arrow on the left. The issue was that the comment bubble was set to a fixed height and I need it to grow with the comment.

I modified bubble1 to set the height to auto. When I did that, the arrow disappeared from the box. The box below with the fixed width shows the arrow that should be there.

Demo page: http://schw.im/bubbles.htm

my css:

        <style>
        .bubble1
        {
        position: relative;
        overflow-y: auto;
        width: 600px;
        height: auto;
        padding: 5px;
        background: #FAE4B1;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        }

        .bubble1:after
        {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 20px 15px 20px 0;
        border-color: transparent #FAE4B1;
        display: block;
        width: 0;
        z-index: 1;
        margin-top: -20px;
        left: -15px;
        top: 50%;
        }
        .bubble2
        {
        position: relative;
        width: 600px;
        height: 75px;
        padding: 5px;
        background: #FFD778;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        }

        .bubble2:after
        {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 20px 15px 20px 0;
        border-color: transparent #FFD778;
        display: block;
        width: 0;
        z-index: 1;
        margin-top: -20px;
        left: -15px;
        top: 50%;
        }
        </style>

Could someone help me get my arrow back? I would like it to stay to the upper left corner of the bubble, if that’s possible.

Thanks for your time!

2

Could you not just set min-height (whatever the height you had) which will allow content to grow?

3

On bubble1 you have hidden the overflow so nothing can show outside the box and that is the reason the arrow is not showing. If you remove the overflow your arrow will show :slight_smile:

4

Hi there Ryan and thanks for the help.

I tried adding min-height: 75px; to the code and the problem persisted. I tried removing the height: auto; and leaving min-height and the issue still remains. Am I utilizing it incorrectly?

5

No you were utilizing it correctly. Your question to me, was that you had a fixed height but you needed content to grow - from there I suggested the min-height.

Upon actually opening the page, Paul is correct - the overflow rule is the issue.

6

Haha, thanks very much. I messed that up while trying to fix the div growth :slight_smile:

Thank you for your help!

7

I think you missed my post above which contains the answer :slight_smile: