How can I resize the border to match the size of the text inside it?

Check out the following image to see how it appears:https://i.sstatic.net/RkMqI.png

Here is an example code snippet of a message:

.allMsg {
  width: 100%;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
</div>

How can I make the border as wide as the text inside? I tried using padding, but it didn't work. Can someone please help me with this issue?

htmlcssborder

Answer №1

To create different styling for your messages, you can wrap them inside another element. For example, you can have all messages contained within a full-width element, with friend's messages aligned to the left and having a blue background, while your messages are aligned to the right and have a green background. If you want to keep your markup simple, you can wrap your messages inside a span element without needing to make any other changes to your HTML.

.allMsg {
  width: 100%;
}

.self span, .friend span {
  border-radius: 1rem;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.self span {
  background-color: #28a745;
}

.friend span {
  background-color: #2845a7;
}

.self {
  text-align: right;
}

.friend {
  text-align: left;
}
<div class='allMsg'>
  <p class='chatMsg friend'>
    <span>hello</span>
  </p>
  <p class='chatMsg self'>
    <span>hy</span>
  </p>
  <p class='chatMsg friend'>
    <span>how are you friend?</span>
  </p>
  <p class='chatMsg self'>
    <span>i'm fine thanks</span>
  </p>
</div>

Answer №2

To optimize the layout, consider using flexbox within the container:

.allMsg {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

For a visual representation, you can refer to the following example:

.allMsg {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
  <p class='self chatMsg'>This is a test</p>
</div>

Answer №3

Although this question may be dated, I have a very simple solution that surprisingly hasn't been mentioned before.

Simply include width: fit-content in the CSS for the elements you desire - specifically .self and .friend

.allMsg {
  width: 100%;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* add this to your code */
.chatMsg {
  width: fit-content;
}
<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
</div>

For further information on these property values, you can refer to this StackOverflow question

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Need help aligning a column class perfectly in bootstrap?

I'm currently learning Bootstrap 3 and I have some HTML code that looks like this: <ul class="row> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"></li> <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"></li> .. </ul ...

htmlcss

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Controlling CSS Styles in Angular using TypeScript

Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...

cssangulartypescriptmomentjs

Evaluating h1 content in HTML using Angular Protactor testing

I am completely new to end-to-end testing. I have a login page in my application that should be displayed to users when they log out. However, I am facing an issue with retrieving the text from a specific div element containing an h1 tag, leading to unexpe ...

htmlangularseleniumprotractorend-to-end

Units such as 'rem' and 'px' are not compatible when using bootstrap 4 alpha 6

While attempting to integrate a bootstrap 4 template (using bootstrap 4 alpha 6), I encountered the following error: Incompatible units: 'rem' and 'px'. This occurred on the line: $input-height: (($font-size-base * $input-btn-line-he ...

csssassbootstrap-4incompatibletypeerror

Ensure that a div remains active even after it has been selected through AJAX using jQuery

I am currently utilizing ajax to display information from a database. The application I am working on is a chat app, where clicking on a specific conversation will append the data to a view. The structure of my conversation div is as follows: <div clas ...

javascripthtmlcss

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

cssbootstrap-4

Variable from the submitted form does not contain the expected data

Even though I struggled to find a solution for this issue, I decided to share it here. Whenever I attempt to retrieve data from a form-submitted variable $receiptNo, it just doesn't seem to work. sales.php <input name="txtReceiptNo" type="text" i ...

phphtmlmysqlfpdf

Updating divs automatically using Ajax without refreshing the page is not functioning as intended

I'm having trouble understanding why this isn't functioning properly. My goal is to have the data from load.php displayed in the div sample. However, if the code is updated (for example, when pulling information from a database), I want only the ...

javascriptphphtmlajaxrefresh

"When the screen resolution changes, the absolute positioning of images won't function as expected

I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using: ...

htmlcss

space allocated beneath a table cell

I am currently utilizing the foundation framework for emails and have encountered a formatting issue on my Test Page. There seems to be an unwanted whitespace just below the racoon image that I am struggling to remove. Despite setting the height to 250px, ...

htmlcss

Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...

cssreactjsmaterial-uireact-tablereact-table-v7

Utilize LI styling exclusively for a specific section of the website

Is it possible to style LI items with padding and bullet points only when they are inside the <div class="article-content"> element without affecting other ul/li styles on the website such as the navigation menu? Thank you for your help! .article-co ...

htmlcss

Extract image styles from a different webpage

My website is located at: I'm attempting to replicate the testimonial photo effect that can be seen on this website: https://i.sstatic.net/70Jqd.png What CSS code do I need to include in order to make the image with the class "client-pic" circula ...

htmlcss

What is the proper way to include a parameter in an ASP onclick function within a table row?

Below is a table row declared within a listview: <tr onclick="<%= _jsPostBackCall %>;" /> When calling a postback method on the backend, I need to retrieve the tr index: public void RaisePostBackEvent(string eventArgument) { ...

asp.nethtmlhtml-tablepostback

Implementing CSS styling within a JavaScript file

I have a vague memory of an easy way to incorporate CSS code within a JS file, but I can't recall the specific details. Simply inserting CSS code into a JS file doesn't seem to work, so there may be a need for comments or some other method. *No ...

javascripthtmlcss

Identifying CSS on iPhone and iPad: A Guide

I need to adjust the CSS style based on different devices. This is how I currently have it set up: <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Destop.css")" media="only screen and (min-width: 1224px)"/> <link rel="s ...

htmlcss

What is the method to have the text cursor within a text field start a few pixels in?

I need a text field with the cursor starting a few pixels (let's say 4) from the left-hand side. I am aware that this can be achieved by adjusting the size of the text field using padding, but I am curious if there is a way to resize the text box with ...

javascriptcssresizetextfieldtext-cursor

Unique button for custom "CODE" in Froala

Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...

javascripthtmlwysiwyg

Styling with CSS: Utilizing the Float Left Property to Anchor Elements

Currently, I have implemented an anchor element that utilizes a CSS class to replace the text with an image. Despite its unusual nature, the end result is mostly satisfactory. .toolLink a { overflow:hidden; } .toolEdit { float:left; ba ...

css