What steps should be taken to correct the alignment of the text in the comment?

I'm trying to achieve a layout where the comment's text appears underneath the user image, similar to this example: https://i.sstatic.net/8unS5UTK.png

However, my current output shows the comment's text next to the user image instead of below it. What could be causing this issue? Did I miss something in my approach?

document.addEventListener("DOMContentLoaded", function() {
  addDefaultComment(); // Add a default comment when the page loads
  keepDropdownOpen(); // Keep the dropdown open by default
});

function toggleDropdown() {
  const dropdownContent = document.getElementById("dropdownContent");
  dropdownContent.classList.toggle("show");
}

// More JavaScript functions and code here

Answer №1

Utilizing the power of a flex container with row as the direction can have a transformative effect on your .comment-card. By forcing all its children to align in one-dimensional harmony, the flex behavior creates a visually cohesive layout. For more information on flexbox basics, check out this link.

If you're facing challenges, here are some solutions: Option 1: Remove the img from the flex container. Option 2: Explore grid as an alternative to flex. Option 3: Consider changing the flex direction to column, but be aware of potential display issues that may arise.

Answer №2

It appears that the image is positioned directly above the text. To correct this, you can simply add the CSS text-align:right; to the .comment-card class.

.comments-container {
    padding-bottom: 0px !important;
} 
<div class="custom-box">
    <div class="comments-container">
        <div class="dropdown-container p" onclick="toggleDropdown()">
            <span class="mt-1">التعليقات</span>
            <span class="arrow mt-1"></span>
        </div>
        <div id="dropdownContent" class="dropdown-content">
            <h3>إضافة تعليق</h3>
            <div class="comment-input-container">
                <input type="text" id="commentText" class="comment-input"/>
            </div>
            <button onclick="addComment()" class="add-comment-button">
                أضف
            </button>
            <div id="commentsList">
                <div class="comment-card">
                    <div class="comment-user-date">
                        <div class="comment-header">
                            <span class="user-name">زائر</span>
                            <span class="comment-date">8/8/2024 5:32:52 pm</span>
                        </div>
                        <img src="https://via.placeholder.com/40">
                    </div>
                    <div class="comment-content">
                        <br>
                        <div class="comment-text">
                            نا يجب أن يكون التعليق!هنا يجب أن يكون التعليق!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

Answer №3

#a{
display:flex;
flex-direction:column;
width:100%;
text-align:center;
}

#b{
display:flex;
justify-content:space-between;
}
<div id = 'a'>
   <div id = 'b'>
      <div>username</div>
      <div>timestamp</div>
   </div>

   <div >message text</div>

</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

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

Insert details into Mysql database

This indicates an issue with Line 15 of my code. I would like to include additional details and have them displayed in a table. see image here Error alert: syntax error, unexpected ';' in N:\ftp\compc\ac12mm\untitled folder& ...

Sharing React components in projects

Two of my upcoming projects will require sharing components such as headers, footers, and inputs. To facilitate this, I have moved these shared components into a separate repository, which has been working well so far. In the common repository, I have set ...

HTML Input Hidden : Completely Concealed

I have been working on creating a 'captcha' for my website, and this is the code I am using: <form class="captcha" method="post"> <label><?php echo $captchas ?></label><br> <input name="captcha" /> <input t ...

Preserving KendoGrid Selection Status During Navigation Between Pages

When using kendoGrid, I encounter an issue where the selected product ID does not persist across different pages. Initially, when the grid is loaded, the corresponding row is selected based on the productID. However, after unchecking the product ID on the ...

The Firebase Function encountered an error: TypeError - it is unable to read the property 'replace' as it is undefined

I'm currently following Aaron Klasner's guide on Hackernoon for setting up a Medium feed in react. To test it locally, I need to find a way around the CORB that Medium uses to prevent local requests. I tried using a firebase function, but encou ...

Retrieve information from a JSON file and dynamically showcase it within a REACT component

Hey there! I'm a newbie in the world of programming and currently working on creating a carousel using Bootstrap and React. My aim is to make the Carousel images dynamic by fetching data from a local .json file. However, my current implementation seem ...

Code for Custom Controllers in Strapi Beta version 3.0

I have encountered some discrepancies in the beta version of Strapi's controllers compared to the previous version. The new version includes multipart/sanitization boilerplate, and I am having trouble integrating my order object and Stripe charge. Be ...

What is the best way to responsively position a bootstrap button?

Recently diving into the world of CSS and Bootstrap, I encountered an issue with a Bootstrap button on my webpage. Despite my efforts, I couldn't seem to make it responsive to window resizing. It feels like there's a glitch in the code somewhere, ...

What is the process of displaying an image every 5 seconds in React?

Each time you visit this URL: , a new image is displayed. I am trying to make my React component show a different image with this URL every 5 seconds, but I'm having trouble. Here is the code I have: import { useEffect, useState } from "react"; ...

What is the best way to use CSS to connect the tips of shapes for perfect alignment?

In an attempt to utilize CSS3 for creating shapes and aligning them to resemble a certain image, I have successfully crafted a pink square along with 4 gray rectangles. Initially, my approach involved creating separate div elements for each shape and adjus ...

Can one extract a property from an object and assign it to a property on the constructor?

Currently working with TypeScript, I am looking to destructure properties from an object. The challenge lies in the fact that I need to assign it to a property on the constructor of the class: var someData = [{title: 'some title', desc: 'so ...

The dropdown menu adjusts its value based on the selected radio button

When I select the "12 hour" radio button, the drop-down values change to 1 am - 12 am and 1 pm - 12 pm. If I select 24 hours, then the values change to 1-24. Below is my code: <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> ...

How can I prevent receiving redundant data and effectively manage my data?

I am currently working on adding offline support to my app. The logic I am following is to first check if there is cached feed data available. If the data is present, it will set the feeds to that cached data and display it from the cache. However, it will ...

Has the jQuery plugin object misplaced a variable?

I am in the process of developing a basic plugin using jQuery. My current approach involves creating private functions and storing variables within the jQuery object itself. (function($) { var somePrivateFn = function() { alert(this.x); } ...

Using JavaScript to change images from an array into img elements with a specific class

I am working on code that attempts to display temporary images from `tempimages[]` onto the `img src` with `id=slide` within the `box002` class, based on a random number chosen from `arrayVariable` and assigned to `ptag[i]`. The objective is to initially ...

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

Off-center rotation of an element - seeking solution [closed

This question has been closed. It requires additional details for debugging. Answer submissions are currently not accepted. ...

Steps for displaying search results based on state when a button is clicked

My current challenge involves creating a component that displays a list of results upon clicking the "Find" button. However, I am encountering issues with the results state variable not resetting when I utilize setResults([]). In addition, only the most r ...

What steps do I need to take to incorporate Material UI icons into my REACT project?

After reviewing the documentation, I found it somewhat confusing with terms such as "MaterialIcon, SVGIcons, Icons". If you are interested, you can check out the link here. I am looking for a simple explanation of the process from installation to using th ...