Border Width To Change As Per The Inner Div Content Width

I've the below HTML Code in my document.

Hello, Welcome!. You can ask me questions on Comp

Solution 1:

try this https://plnkr.co/edit/KXF1jkOd7G9JB8j7DIGC

I have changed the div to span. Hope this helps !

<span class="chat-box-left">Hello, Welcome!. You can ask me
    questions on Compliance Policy ..</span>

Solution 2:

Are you looking some thing like this, Try this add display: inline-block; to div

.hr-clas {
    border-top: 1px solid #A12EB3;
}

.chat-box-main {
    height: 400px;
    overflow-y: auto;
}

.chat-box-div {
    border: 2px solid #A12EB3;
    border-bottom: 2px solid #A12EB3;
}

.chat-box-head {
    padding: 10px 15px;
    border-bottom: 2px solid #A12EB3;
    background-color: #B25AE5;
    color: #fff;
    text-align: center;
}

.chat-box-left {
    width:auto;
    height: auto;
    padding: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
    border: 2px solid #73AD21;
    border-radius: 25px;
  display: inline-block;
  
}

.chat-box-left:after {
    top: auto;
    left: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-left {
    margin-top: 30px;
    margin-left: 60px;
    text-align: left;
    color: #049E64;
}

.chat-box-name-left img {
    max-width: 40px;
    border: 2px solid #049E64;
}

.chat-box-right {
    width:auto;
    height: auto;
    padding: 35px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid #C5C5C5;
    font-size: 12px;
  display: inline-block;
}

.chat-box-right:after {
    top: 100%;
 display: inline-block;   right: 10%;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-top-color: #C5C5C5;
    border-width: 15px;
    margin-left: -15px;
}

.chat-box-name-right {
    color: #354EA0;
    margin-top: 30px;
    margin-right: 60px;
    text-align: right;
}

.chat-box-name-right img {
    max-width: 40px;
    border: 2px solid #354EA0;
}

.chat-box-footer {
    background-color: #D8D8D8;
    padding: 10px;
}

<div class="panel-body chat-box-main">
    <div class="chat-box-left">Hello, Welcome!. You can ask me
        questions on Compliance Policy ..</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle"> - Bot
    </div>
    <hr class="hr-clas">



    <div class="chat-box-right" id="chatbox">Hi</div>
    <div class="chat-box-name-right">
        <img src="smiley.jpg" alt="bootstrap Chat box user image"
            class="img-circle">
    </div>
    <div class="chat-box-left">Hello</div>
    <div class="chat-box-name-left">
        <img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
            class="img-circle">- Bot
    </div>
</div>

Share