The margin on the right side is not functioning as expected and exceeds the boundary, even though the container is using the flex display property

I'm struggling to position the rating stars on the right side without them going outside of the block.

I attempted using 'display: flex' on the parent element, but it didn't solve the issue((

Currently trying to adjust the layout of the RatingUserList section

.RatingUser {
  display: flex;
}

.RatingUserList {
  margin-right: 40px;
  list-style-type: none;
  display: flex;
  height: 20px;
}

.RatingCell {
  margin-right: 5px;
}
<div class="NameAndRating">
  <p class="UserName">John Doe</p>
  <!-- user's name in profile -->
  <div class="RatingUser">
    <ul class="RatingUserList">
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
      <li class="RatingCell"><img class="RatingImg" src="img/RatingStar.svg" alt=""></li>
    </ul>
  </div>
</div>

javascripthtmlcssflexboxmargin

Answer №1

It seems like this is the information you were looking for. I have utilized HTML stars to represent them visually. You would need to substitute them with your own images.

/* Added */
.NameAndRating {
  display: flex;
}

.RatingUser {
  margin-left: auto;
}
/* ---------- */

.RatingUserList {
  margin-right: 40px;
  list-style-type: none;
  display: flex;
  height: 20px;
}

.RatingCell {
  margin-right: 5px;
}
<div class="NameAndRating">
  <p class="UserName">Юрий Петров</p>
  <!-- User's name in profile -->
  <div class="RatingUser">
    <ul class="RatingUserList">
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
      <li class="RatingCell">&#128953;</li>
    </ul>
  </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

"Troubleshoot: jQuery UI accordion not functioning properly in response to

I've encountered an issue with the accordion functionality while working with dynamic data. To address this, I'm incorporating JavaScript to generate <div> and <h3> tags for the accordion. Here is the code snippet I am using: $(&ap ...

javascriptjqueryhtml

Problem with opening the keyboard feature in an Ionic app

Hello everyone, I'm relatively new to Ionic development and I've been trying to integrate a keyboard plugin into my application that opens from the footer and focuses on input fields for entering values. Here is the link to the plugin I used: ht ...

javascripttypescriptionic-frameworkionic2

"JQuery conflict arises due to compatibility issues between Yoast and bbPress

Following the recent update of Yoast to version 4.7, it appears that JQuery is experiencing conflicts and not running properly. I noticed that in version 2.3.5 of Yoast, JQuery runs fine and I see this code on the page: <script type='text/javascri ...

javascriptjquerywordpressbbpress

What is the solution to preventing borders from appearing on input tags when they are autocompleted

Recently, I encountered an issue while working on a website form where the input tag was showing borders during autocompletion, despite specifying border:none. I tried various CSS pseudo classes to resolve this problem but none of them worked. Does anyon ...

htmlcss

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

htmlangulartypescriptrestangular-material

What causes the unexpected outcome when applying theme overrides in Mui V5?

I am looking to adjust the border radius of all input fields in my project. Specifically, I would like the TextField component to have a border radius of https://i.stack.imgur.com/ULEGj.png instead of https://i.stack.imgur.com/NWmUe.png. According to the M ...

cssmaterial-ui

The event handler onClick is unresponsive in the button element within a React component

Hey there, I'm new to React and I'm having an issue with a class-based component. Below is my component that I'm calling inside another React component. I just want the temp function to be called when onClick is triggered, but it's not ...

javascriptnode.jsreactjsbuttonclick

React search filter feature with dropdown selection

After successfully implementing a search filter in my React app, I encountered an issue when trying to incorporate a select tag to change the search filter criteria. class BookList extends Component { state = { search: '', selectedValue: ' ...

javascriptreactjs

Guide to attaching data to an AJAX request

I'm new to ajax and recently encountered an issue while working on a project where I needed to send a query from an HTML form. However, I've been unable to send any data for some reason. I tried sending FormData through the xmlhttprequest.send() ...

javascriptphphtmlajaxform-data

Converting floating point numbers to fixed floating point numbers in JavaScript

Consider this scenario: I need to calculate 3 divided by 6, which equals 0.5 as a floating number. However, when I used the javascript toFixed(6) method to round it to 6 decimal points, it returned '0.500000' as a string instead of a floating num ...

javascriptfloating-point

How to Refine Database Queries in Laravel Without Using Conditional Statements

I am currently facing the challenge of filtering users in my database using numerous if / elseif statements, and I'm on the lookout for a more efficient method. At present, I find myself writing if statements for every possible query based on the foll ...

javascriptphpajaxlaravel

Tips for locating and interacting with a specific element using Selenium

I am delving into the realm of Python and honing my skills by creating practical applications for daily use. I recently embarked on automating a routine task, but hit a roadblock when attempting to utilize selenium to click on a specific element that dynam ...

pythonhtmlseleniumselenium-webdriverxpath

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...

htmlcssmobilepositionsticky

Switch the checkbox to a selection option

Is there a way to switch the selection method from checkboxes to a dropdown menu? $("input[name=koleso]:first").prop("checked", true); $('body').on('click', '.koleso label', function (e) { koles ...

javascriptjquery

Using the identical code, Wicked PDF generates distinct reports on separate computers

While utilizing Ruby on Rails to render a PDF using WickedPDF and sending it via email, I encountered an unexpected issue. The same code is present on two separate computers, both with up-to-date versions synced from GitHub. However, the generated PDF repo ...

htmlcssruby-on-railswicked-pdf

The foundation grid system is experiencing difficulties when implemented on an Angular form

After successfully installing Foundation 6 on my Angular project, I am facing an issue with the grid system not working properly. Despite numerous attempts to troubleshoot and debug, I have not been able to resolve this issue. If anyone has any insights or ...

cssangularzurb-foundationzurb-foundation-6

Determine whether the request was made using ajax or traditional non-ajax methods

While testing the PHP code below, I noticed that the headers in the request do not indicate that it is JavaScript sending the request instead of a non-JavaScript user: Accept:*/* Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8 AlexaToolba ...

javascriptphpajaxxmlhttprequest

When utilizing the tab key on Chrome, the iFrame fails to scroll

We are currently facing an issue with our web application that is embedded inside an iFrame. On one of our HTML pages, there are numerous textboxes with a large amount of content, requiring users to scroll down to navigate through it all. When using the ...

javascriptjqueryhtmlcssiframe

Asynchronous setTimeout for server-side operations

I am currently facing an issue with my web server. Whenever a request is made, the server initiates a phone call, waits for 3 seconds, and then checks if the call is still ongoing. I have utilized setTimeout to achieve this functionality, but it seems to b ...

javascripthttpexpresswebtimeout

What are the counterparts of HasValue and .Value in TypeScript?

There is a method in my code: public cancelOperation(OperationId: string): Promise<void> { // some calls } I retrieve OperationId from another function: let operationId = GetOperationId() {} which returns a nullable OperationId, operat ...

javascriptc#typescriptconditional-operatornull-check