showing <li> elements on both the left and right sides based on the specified condition

Question

showing <li> elements on both the left and right sides based on the specified condition

I am struggling to show messages one by one using the 'li' tag, with the intention of having our messages appear on the right side and others on the left side in a react Chat app. However, the issue arises when I attempt to use float left or float right, causing all elements to collapse onto the same line like this

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

The styling code for my react chat is as follows:

      {this.state.chats.map(chat => (<div key={chat.timestamp}>
        {this.state.user.uid === chat.uid  ?(
       <li className=" self" style={{listStyleType:"none",overflow:'hidden',marginLeft: 2 +'px',float:'right',display:'inline-block',
            backgroundColor:"whitesmoke",margin:2 + "em",padding:13+'px',width:'max-content',borderBottomLeftRadius:11+'px',
            borderBottomRightRadius:11+'px',borderTopLeftRadius:11+'px'}}>

                <div className="message text-dark">{chat.content} </div>
        </li>
            
          ):(
                <li className="other" style={{listStyleType:"none",overflow:'hidden',marginLeft: 2 +'px',float:'left',display:'inline-block',
            backgroundColor:"blanchedalmond",margin:2 + "em",padding:13+'px',width:'max-content',borderBottomLeftRadius:11+'px',
            borderBottomRightRadius:11+'px',borderTopRightRadius:11+'px'}}>
          
                 <div className="message text-dark">{chat.content}</div>
            
            </li>
            
          )}
        </div>
        ))}

Update: consider floating each individual div

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

html css reactjs bootstrap-4

Answer 1

Answer №1

.self {
  background: orange;
  float: right;
  clear: both;
}

.other {
  background: blue;
  float: left;
  clear: both;
}

<ul>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="other">message</li>
  <li class="other">message</li>
  <li class="other">message</li>
  <li class="self">message</li>
</ul>

https://developer.mozilla.org/en-US/docs/Web/CSS/clear Explore the clear attribute to handle floated elements effectively.

Answer 2

.self {
  background: orange;
  float: right;
  clear: both;
}

.other {
  background: blue;
  float: left;
  clear: both;
}

<ul>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="other">message</li>
  <li class="other">message</li>
  <li class="other">message</li>
  <li class="self">message</li>
</ul>

https://developer.mozilla.org/en-US/docs/Web/CSS/clear Explore the clear attribute to handle floated elements effectively.

Answer 3

Answer №2

Unique Flexbox Solution:

.left {
  display: flex;
  justify-content: flex-start;
}

.right {
  display: flex;
  justify-content: flex-end;
}

<ul>
  <li class="left">
    Displaying others message
  </li>
  <li class="right">
    Displaying your message
  </li>
</ul>

Unique Solution 2

Consider adjusting <li> to occupy the entire line, and apply float: left/right to the internal <div>

Here is an example: https://jsfiddle.net/L1g6wx34/

.left {
  float: left;
}

.right {
  float: right;
}

<ul>
  <li>
    <div class="left">
      Displaying others message
    </div>
  </li>
  <li>
    <div class="right">
      Displaying your message
    </div>
  </li>
  <li>
    <div class="right">
      Displaying your message
    </div>
  </li>
</ul>

Answer 4

Unique Flexbox Solution:

.left {
  display: flex;
  justify-content: flex-start;
}

.right {
  display: flex;
  justify-content: flex-end;
}

<ul>
  <li class="left">
    Displaying others message
  </li>
  <li class="right">
    Displaying your message
  </li>
</ul>

Unique Solution 2

Consider adjusting <li> to occupy the entire line, and apply float: left/right to the internal <div>

Here is an example: https://jsfiddle.net/L1g6wx34/

.left {
  float: left;
}

.right {
  float: right;
}

<ul>
  <li>
    <div class="left">
      Displaying others message
    </div>
  </li>
  <li>
    <div class="right">
      Displaying your message
    </div>
  </li>
  <li>
    <div class="right">
      Displaying your message
    </div>
  </li>
</ul>

showing <li> elements on both the left and right sides based on the specified condition

Answer №1

Answer №2

Similar questions

Bring in data from a local JSON file into the state of a React

Having trouble incorporating Bootstrap 5's SASS variables into my project's SASS files

React: Having trouble displaying routes in a separate component

What is the best way to modify this CSS code for use in a React Native

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

AngularJS Cascading Dropdowns for Enhanced User Experience

Sending a null value to the state is necessary to ensure that the ImageField in React and Django is updated to null

Find your way to a unique div created through a while loop

Is it possible to coerce multiple Context Consumers into sharing their state?

What advantages can be gained from having multiple package.json files within a single application?

Integrate a third-party REST API with ReactJS and NodeJS

Tips for personalizing Material-UI and styled-components styles using prop-based customization

Learn the steps to Toggle Javascript on window resize

Ways to expand media queries using sass

Using Formik with MUI Multiple Select

Encountered an error while trying to filter markers and list using Knockout and Google Maps - Uncaught TypeError: Unable to locate property 'marker' of undefined

To modify the text within the pagination select box in ANTD, follow these steps:

Guide to personalizing React Material-UI Next components

Unable to execute the npm run dev command

The images are positioned within the middle of the page, directly beneath the sidebar, rather than at the top. (Vue.Js)