Utilizing CSS and JQUERY for Styling Border radius

Is there a way in jQuery to select specific parts and apply a "border radius"?

I've been struggling to use a jQuery selector to achieve this. Is there another method using CSS?

I don't want to manually add a "CLASS" to the HTML code to solve this issue. I want to automate the detection of these parts with a concise code.

Desired output: https://i.sstatic.net/oomDW.png

My Code: https://jsfiddle.net/gL3dwyu4/

    body{
        margin: 0;
        padding: 15px 0px;
        font-family: sans-serif;
        font-size: 15px;
    }

    #chat-messages-list .message-row{
        display: flex;
        word-wrap: break-word;
        margin-bottom: 2px;
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
    }
    #chat-messages-list .message-row:hover .message-time{
        opacity: 1;
    }
    #chat-messages-list .message-row .chat-avatar{
        display: block;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        flex-direction: column;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #eff0f1;
        background-size: cover;
    }

    #chat-messages-list .message-row .message-container{
        position: relative;
        padding: 6px 12px;
        box-sizing: border-box;
        word-break: break-word;
        border-bottom-left-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
    }
    #chat-messages-list .message-row .message-time{
        display: flex;
        align-items: center;
        margin: 0 10px;
        font-size: 12px;
        color: var(--black-400);
        text-align: left;
        opacity: 0;
        transition: opacity 275ms;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #chat-messages-list .message-row.arrow {
        margin-top: 10px;
    }

    #chat-messages-list .message-row:not(.arrow) .message-sender,
    #chat-messages-list .message-row.me .message-sender,
    #chat-messages-list .message-row:not(.arrow) .chat-username,
    #chat-messages-list .message-row.me .chat-username {
        display: none;
    }


    #chat-messages-list .message-row.me{
        flex-direction: row-reverse;
    }
    #chat-messages-list .message-row.me .message-container {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        background-color: #f2720c;
        color: #fff;
    }
    #chat-messages-list .message-row.me.arrow .message-container {
        border-top-right-radius: 1.25rem;
    }
    #chat-messages-list .message-row.you{
        justify-content: flex-start;
    }
    #chat-messages-list .message-row.you .message-sender{
        cursor: pointer;
    }
    #chat-messages-list .message-row.you .message-container {
        background-color: #eff0f1;
        color: #0c0d0e;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        margin-left: 38px;
    }
    #chat-messages-list .message-row.you.arrow .message-container {
        border-top-left-radius: 1.25rem;
        margin-left: 10px;
    }


    #chat-messages-list .message-row.you.arrow .message-container .chat-username {
        cursor: pointer;
        font-size: 16px;
        margin-bottom: 5px;
        font-weight: 600;
        color: #0c0d0e;
    }
    #chat-messages-list .message-row.you .message-time{
        text-align: right;
    }
<div id="chat-messages-list">
    <div class="message-row me arrow" data-messageid="1" data-senderid="1001">
        <div class="message-sender" onclick="_chatUserDetails(1001)"><div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div></div>
        <div class="message-container">
            <div class="chat-username">seyit55</div>
            <div class="chat-message">Hello!</div>
        </div>
        <div class="message-time">17:00</div>
    </div>
    // Remaining HTML code snippets...
</div>

javascripthtmljquerycss

Answer №1

Apply the radius to all, then use a pseudo element to hide the unnecessary ones.

Check out the relevant code below:

#chat-messages-list .message-row.me .message-container {
  border-bottom-right-radius: 1.25rem;
}
#chat-messages-list .message-row.me:not(.arrow) .message-container::before {
    content: "";
    position: absolute;
    z-index:-1;
    bottom: calc(100% + 2px);
    right: 0;
    width: 1rem;
    height: 1rem;
    background: inherit; /* add a random color here to test */
}

Follow the same logic for the you elements

View the full code below

body {
  margin: 0;
  padding: 15px 0px;
  font-family: sans-serif;
  font-size: 15px;
}

#chat-messages-list .message-row {
  display: flex;
  word-wrap: break-word;
  margin-bottom: 2px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

#chat-messages-list .message-row:hover .message-time {
  opacity: 1;
}

#chat-messages-list .message-row .chat-avatar {
  display: block;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  flex-direction: column;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #eff0f1;
  background-size: cover;
}

#chat-messages-list .message-row .message-container {
  position: relative;
  padding: 6px 12px;
  box-sizing: border-box;
  word-break: break-word;
  border-bottom-left-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
} 

... (Remaining code continues) ... 


<div id="chat-messages-list">
  <div class="message-row me arrow" data-messageid="1" data-senderid="1001">
    <div class="message-sender" onclick="_chatUserDetails(1001)">
      <div class="chat-avatar" style="background-image: url(https://i.pinimg.com/originals/11/54/5b/11545b03970ce036070c48944c1aa66e.jpg);"></div>
    </div>
    <div class="message-container">
      <div class="chat-username">seyit55</div>
      <div class="chat-message">Hello!</div>
    </div>
    <div class="message-time">17:00</div>
  </div>
  ... (Remaining code continues) ... 
</div>

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

Most effective method for utilizing Ajax to upload files and ensuring they are uploaded before submission

I am currently working on a form that contains various fields, including file upload functionality for multiple files. I have also explored the option of using AJAX to upload files. My goal is to seamlessly upload files via AJAX while simultaneously fillin ...

javascriptphpjqueryajaxlaravel

Data that is loaded asynchronously will not display rendered

I have async data loading via jayson from a server. After the data has finished loading, the boolean "loading" is set to false but my content does not re-render. Even though I can see on the console that the data was loaded correctly. var App = new Vue( ...

javascriptvue.js

Creating a loop to iterate through JSON data being received

I successfully used JSON to display data, but I am now wondering how I can print all the database entries into a div or table. JavaScript $(document).ready(function() { $.ajax({ type : 'POST', url : 'server.php', dataTyp ...

javascriptjqueryjsonajax

Tips for concealing a complete class without causing any issues

My attempt at creating a quiz feature has been a challenge. I wanted each section of the quiz to open as I move through the questions. Here are the initial two parts of the quiz. function initialize() { var section = document.getElementsByClassName("p ...

javascripthtmlcsstypeerror

Sending information to a webpage in real-time using AJAX

I need help optimizing the performance of my registration form. The form includes a text field where users input a string, which needs to be dynamically validated using a PHP file. What would be the most efficient way to achieve this? Should I pass the da ...

phpjqueryajax

Discover the step-by-step guide to implementing pagination using NG-ZORRO-Andt in your Angular

I am currently using NG-ZORRO Ant Design pagination on my HTML page and it is displaying correctly in my browser. However, I am struggling with linking the data from the API to the pagination feature. Here is the snippet of my HTML code: <div class ...

htmlangularantdng-zorro-antd

Is there a way in Angular to activate the contenteditable feature through a controller?

I have a collection of items, and the currently selected one is displayed in more detail on another section of the screen. The detailed section allows users to modify specific parts of the chosen item using contenteditable. When a user adds a new item to ...

javascriptjqueryangularjscontenteditable

Ways to verify the click status of a button prior to initiating an AJAX request with jQuery?

I am facing an issue with a button that needs to be clicked by the user before submitting the form. Here's the code snippet for the button: $('#chooseButton') .on( 'click', function() { console.log("user ha ...

javascriptjquery

Displaying website backgrounds in a digital signage system on a full screen

My pharmacy is using a Raspberry Pi and Screenly-OSE for our Digital Signage solution. We showcase various ads along with the overnights using a simple Sinatra application to serve overnights. Everything works great, but there's a pesky white space th ...

csssinatra

SliderCarousel - maintaining variable width image in the middle of the carousel

I am working with a collection of variable width images that I want to display in a carousel. After some research, I have decided to use 'carouFredSel' as it appears to be highly customizable. My goal is to always have one image centered horizont ...

jquerycarouselcaroufredsel

Filtering data at different levels in Javascript/Javascript programming language

Consider this array: var selection = ["14-3","19-5", "23-5", "40-8", "41-8"]; We now have two separate arrays: Array1 includes the first part of each value (before hyphens) in the original array, such as 1 ...

javascript

Update a portion of a hyperlink using jQuery

Currently, I am utilizing Ransack for sorting purposes. However, I encountered an issue when attempting to modify the sorting links in cases where both search and sorting functionalities are implemented using AJAX. As a result, I have taken it upon myself ...

javascriptjqueryruby-on-railsajaxsorting

Is there a way to modify the displayed value of json_encode() with jQuery?

I am using the json_encode() function to insert data into the database. How can I retrieve just the values of name_units from the units row in the database? This is how the output looks like in PHP code (generated by json_encode()): my_table=>units=& ...

javascriptjqueryarrayseach

Navigating between different route groups using redirection: a step-by-step guide

My project folder structure is organized like this: app (app) dashboard page.tsx page.tsx layout.tsx (auth) login ...

javascriptnext.js

Is it possible to have multiple divs online that automatically move to the next line when the screen size changes?

How can I ensure that each pair of dropdown and label elements stays on the same line, and moves to the next line based on screen size? Here is my current approach: <div style="display:inline-block; vertical-align:middle; width:100%;"> <div ...

htmlcss

Fluid and static containers in Bootstrap offer flexible and fixed-width layout

I am experimenting with combining fluid containers and fixed containers within a single page layout using Bootstrap. For example, I want to have a large image as a hero unit that spans 100% of the width and height of the viewport, or three column images e ...

htmlcsstwitter-bootstrap

Displaying a Progress Bar while Inserting Data into a Database Using Asp.net

When I click on the insert/update button, I want to display a progress bar. However, due to some validations, updations, and insertion functions in the buttons, I am unable to calculate the time taken for a particular button click process. The following ...

jqueryasp.netajax

One column in HTML table row is functional, while the other is not functioning as intended

Currently, I am working on a mapping application that allows users to add features to a database. These features are then displayed on a mapping page in an HTML table. The table consists of three columns: Feature Name, Selected (with an on/off slider switc ...

htmlasp.net-corebootstrap-5

Establishing limits for a division using keyboard commands

Alright, I've decided to remove my code from this post and instead provide a link for you to view it all here: (please disregard any SQL errors) If you click on a Grid-Node, the character will move to that position with boundaries enabled. Draggi ...

jqueryhtmlcss

The Jquery Click Event does not seem to function properly when applied to a Kendo Grid

I need to implement a jQuery function on the Destroy button in order to store data in an array: For this purpose, I am utilizing Kendo Grid as shown below: @(Html.Kendo().Grid(Model) .Name("Passenger") .TableHtmlA ...

jqueryasp.net-mvcasp.net-mvc-3kendo-uikendo-grid