The orientation of the rating stars has transformed into a vertical layout

I'm having trouble creating a rating interface that prompts the user to rate the website (by clicking the stars) and leave a comment. The stars are displaying vertically instead of horizontally, as shown in the image provided in the link. I've tried multiple approaches but none seem to work.

/* Updated Rating CSS code */

.Cont {
  position: absolute;
  width: 633px;
  height: 438px;
  left: 413px;
  top: 252px;
  background: #F1F2F0;
  padding: 25px;
  border-radius: 9px;
  box-shadow: 4px 4px 2px #F1F2F0(230, 254, 164);
}

.cont {
  position: absolute;
  width: 20px;
  background: #f1f2f0;
  padding: 10px 10px;
  border: 1px solid gray;
  border-radius: 10px;
  /* display: inline-block; */
  align-items: center;
  justify-content: center;
  /* flex-direction: row-reverse; */
}

.cont .post {
  display: none;
}

.cont .text {
  font-size: 25px;
  color: #000;
  font-weight: 500;
}

.cont .edit {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #000;
  font-weight: 500;
  cursor: pointer;
}

.cont .edit:hover {
  text-decoration: underline;
}

.cont .star-widget input {
  transform: rotate(90deg);
  display: none;
}

.star-widget label {
  font-size: 40px;
  position: relative;
  color: #fff;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}

input:not(:checked)~label:hover,
input:not(:checked)~label:hover~label {
  color: #fd4;
}

input:checked~label {
  color: #fd4;
}

input#rate-5:checked~label {
  color: #fe7;
  text-shadow: 0 0 20px #952;
}

.container form {
  display: none;
}

input:checked~form {
  display: block;
}

form header {
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}

form .textarea {
  height: 100px;
  width: 100%;
  overflow: hidden;
}

form .textarea textarea {
  height: 130px;
  position: absolute;
  width: 588px;
  top: 230px;
  outline: #777;
  color: gray;
  border: 1px solid gray;
  background: #fff;
  padding: 10px;
  font-size: 16px;
  resize: none;
  text-align: center;
  justify-content: center;
}

.textarea textarea:focus {
  border-color: #000;
}

form .btn {
  position: absolute;
  height: 30px;
  width: 590px;
  top: 380px;
  left: 23px;
}

form .btn button {
  height: 100%;
  width: 100%;
  border: 0px solid #000;
  outline: none;
  background: #c5e8b4;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

form .btn button:hover {
  background: #c5e8b4;
}
<div class="Cont">
  <form action="" method="post">
    <div class="cont">
      <div class="post">
        <div class="text">Success </div>
        <div class="edit">edit</div>
      </div>

      <div class="star-widget">
        <input type="radio" name="Rate" id="rate-5" value="5">
        <label for="rate-5" class="fas fa-star" value="rate-5"></label>

        <input type="radio" name="Rate" id="rate-4" value="4">
        <label for="rate-4" class="fas fa-star" value="rate-4"></label>

        <input type="radio" name="Rate" id="rate-3" value="3">
        <label for="rate-3" class="fas fa-star" value="rate-3"></label>

        <input type="radio" name="Rate" id="rate-2" value="2">
        <label for="rate-2" class="fas fa-star" value="rate-2"></label>

        <input type="radio" name="Rate" id="rate-1" value="1">
        <label for="rate-1" class="fas fa-star" value="rate-1"></label>
      </div>


    </div>
    <div dir="ltr" class="textarea">
      <textarea name="Comment" cols="30" placeholder="Share your experience with the website"></textarea>
    </div>
    <div class="btn">
      <button type="submit" name="submit">Submit</button>
    </div>


  </form>

</div>

javascripthtmlcssrating

Answer №1

You have the option to enclose each label and input within a div and change the star-widget to flex. Here's an example of how you can do it:

/* Custom CSS for Rating */
.Cont{
  position: absolute;
  width: 633px;
  height: 438px;
  left: 413px;
  top: 252px;
  background: #F1F2F0;
  padding: 25px;
  border-radius: 9px;
  box-shadow: 4px 4px 2px #F1F2F0(230, 254, 164);  
}
.cont{
  position: absolute;
  background: #f1f2f0;
  padding: 10px 10px;
  border: 1px solid gray;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
.cont .post{
  display: none;
}
.cont .text{
  font-size: 25px;
  color: #000;
  font-weight: 500;
}
.cont .edit{
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #000;
  font-weight: 500;
  cursor: pointer;
}
.cont .edit:hover{
  text-decoration: underline;
}
.cont .star-widget {
  display: flex;
}
.cont .star-widget input{
  transform:rotate(90deg);
  display: none;
}
.star-widget label{
  font-size: 40px;
  position: relative;
  color: #fff;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{
  color: #fd4;
}
input:checked ~ label{
  color: #fd4;
}
input#rate-5:checked ~ label{
  color: #fe7;
  text-shadow: 0 0 20px #952;
}

.container form{
  display: none;
}
input:checked ~ form{
  display: block;
}
form header{
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}
form .textarea{
  height: 100px;
  width: 100%;
  overflow: hidden;

}
form .textarea textarea{
  height: 130px;
  position: absolute;
  width: 588px;
  top:230px;
  outline:#777;
  color: gray;
  border: 1px solid gray;
  background: #fff;
  padding: 10px;
  font-size: 16px;
  resize: none;
  text-align: center;
  justify-content: center;
}
.textarea textarea:focus{
  border-color: #000;
}
form .btn{
  position: absolute;
  height: 30px;
  width: 590px;
  top:380px;
  left: 23px;

}
form .btn button{
  height: 100%;
  width: 100%;
  border: 0px solid #000;
  outline: none;
  background: #c5e8b4;
  color: #000 ;
  font-size: 17px ;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
form .btn button:hover{
  background: #c5e8b4;
}
<div class="Cont">
  <form action="" method="post">
    <div class="cont">
      <div class="post">
        <div class="text">Success </div>
        <div class="edit">edit</div>
      </div>

      <div class="star-widget">
        <div>
          <input type="radio" name="Rate" id="rate-5" value="5">
          <label for="rate-5" class="fas fa-star" value="rate-5"></label>
        </div>
        <div>

          <input type="radio" name="Rate" id="rate-4" value="4">
          <label for="rate-4" class="fas fa-star" value="rate-4"></label>
        </div>
        <div>
          <input type="radio" name="Rate" id="rate-3" value="3">
          <label for="rate-3" class="fas fa-star" value="rate-3"></label>
        </div>
        <div>
          <input type="radio" name="Rate" id="rate-2" value="2">
          <label for="rate-2" class="fas fa-star" value="rate-2"></label>
        </div>
        <div>
          <input type="radio" name="Rate" id="rate-1" value="1">
          <label for="rate-1" class="fas fa-star" value="rate-1"></label>
        </div>
      </div>


    </div>
    <div dir="ltr" class="textarea">
      <textarea name="Comment" cols="30" placeholder="Describe your experince in the website"></textarea>
    </div>
    <div class="btn">
      <button type="submit" name="submit">Send</button>
    </div>


  </form>

</div>

Answer №2

  • To align the ratings horizontally, apply display: flex to the div with class star-widget.
  • Adjust the width of the div with class .cont by using width: max-width to ensure the ratings fit in the box.

Updated code snippet:

/* Updated Rating CSS code */

.Cont {
  position: absolute;
  width: 633px;
  height: 438px;
  left: 413px;
  top: 252px;
  background: #F1F2F0;
  padding: 25px;
  border-radius: 9px;
  box-shadow: 4px 4px 2px #F1F2F0(230, 254, 164);
}

.cont {
  position: absolute;
  width: max-content;
  background: #f1f2f0;
  padding: 10px 10px;
  border: 1px solid gray;
  border-radius: 10px;
  /* display: inline-block; */
  align-items: center;
  justify-content: center;
  /* flex-direction: row-reverse; */
}

.cont .post {
  display: none;
}

.cont .text {
  font-size: 25px;
  color: #000;
  font-weight: 500;
}

.cont .edit {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #000;
  font-weight: 500;
  cursor: pointer;
}

.cont .edit:hover {
  text-decoration: underline;
}

.cont .star-widget input {
  transform: rotate(90deg);
  display: none;
}

.star-widget{
  display: flex;
}

.star-widget label {
  font-size: 40px;
  position: relative;
  color: #fff;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}

input:not(:checked)~label:hover,
input:not(:checked)~label:hover~label {
  color: #fd4;
}

input:checked~label {
  color: #fd4;
}

input#rate-5:checked~label {
  color: #fe7;
  text-shadow: 0 0 20px #952;
}

.container form {
  display: none;
}

input:checked~form {
  display: block;
}

form header {
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}

form .textarea {
  height: 100px;
  width: 100%;
  overflow: hidden;
}

form .textarea textarea {
  height: 130px;
  position: absolute;
  width: 588px;
  top: 230px;
  outline: #777;
  color: gray;
  border: 1px solid gray;
  background: #fff;
  padding: 10px;
  font-size: 16px;
  resize: none;
  text-align: center;
  justify-content: center;
}

.textarea textarea:focus {
  border-color: #000;
}

form .btn {
  position: absolute;
  height: 30px;
  width: 590px;
  top: 380px;
  left: 23px;
}

form .btn button {
  height: 100%;
  width: 100%;
  border: 0px solid #000;
  outline: none;
  background: #c5e8b4;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

form .btn button:hover {
  background: #c5e8b4;
}
<div class="Cont">
  <form action="" method="post">
    <div class="cont">
      <div class="post">
        <div class="text">Success </div>
        <div class="edit">edit</div>
      </div>

      <div class="star-widget">
        <input type="radio" name="Rate" id="rate-5" value="5">
        <label for="rate-5" class="fas fa-star" value="rate-5"></label>

        <input type="radio" name="Rate" id="rate-4" value="4">
        <label for="rate-4" class="fas fa-star" value="rate-4"></label>

        <input type="radio" name="Rate" id="rate-3" value="3">
        <label for="rate-3" class="fas fa-star" value="rate-3"></label>

        <input type="radio" name="Rate" id="rate-2" value="2">
        <label for="rate-2" class="fas fa-star" value="rate-2"></label>

        <input type="radio" name="Rate" id="rate-1" value="1">
        <label for="rate-1" class="fas fa-star" value="rate-1"></label>
      </div>


    </div>
    <div dir="ltr" class="textarea">
      <textarea name="Comment" cols="30" placeholder="Describe your experince in the website"></textarea>
    </div>
    <div class="btn">
      <button type="submit" name="submit">Send</button>
    </div>


  </form>

</div>

Answer №3

/* Custom CSS for Rating */
.Cont{
  position: absolute;
  width: 633px;
  height: 438px;
  left: 413px;
  top: 252px;
  background: #F1F2F0;
  padding: 25px;
  border-radius: 9px;
  box-shadow: 4px 4px 2px #F1F2F0(230, 254, 164);  
}
.cont{
  position: absolute;
  width: 20px;
  background: #f1f2f0;
  padding: 10px 10px;
  /*border: 1px solid gray;*/
  border-radius: 10px;
  /* display: inline-block; */
  align-items: center;
  justify-content: center;
  /* flex-direction: row-reverse; */
}
.cont .post{
  display: none;
}
.cont .text{
  font-size: 25px;
  color: #000;
  font-weight: 500;
}
.cont .edit{
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #000;
  font-weight: 500;
  cursor: pointer;
}
.cont .edit:hover{
  text-decoration: underline;
}
.cont .star-widget input{
  transform:rotate(90deg);
  display: none;
}
.star-rating {
  display: flex;
  align-items: center;
  width: 160px;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 40px auto;
  position: relative;
}
.star-rating input {
  display: none;
}
.star-rating > label {
  width: 30px;
  height: 30px;
  font-family: Arial;
  font-size: 30px;
  transition: 0.2s ease;
  color: orange;
}
.star-rating label:hover {
  color: #ff69b4;
  transition: 0.2s ease;
}
.star-rating label:active::before {
  transform:scale(1.1);
}
.star-rating label::before {
  content: '\2606';
  position: absolute;
  top: 0px;
  line-height: 26px;
}
.star-rating input:checked ~ label:before {
  content:'\2605';
}

@-moz-document url-prefix() {
  .star-rating input:checked ~ label:before {
  font-size: 36px;
  line-height: 21px;
  }
}  

<div class="Cont">
        <form action="" method="post">
            <div class="cont">
                <div class="post">
                    <div class="text">Success </div>
                    <div class="edit">edit</div>
                </div>
        
            <div class="star-rating">
      <input type="radio" name="stars" id="star-a" value="5"/>
      <label for="star-a"></label>

      <input type="radio" name="stars" id="star-b" value="4"/>
      <label for="star-b"></label>
  
      <input type="radio" name="stars" id="star-c" value="3"/>
      <label for="star-c"></label>
  
      <input type="radio" name="stars" id="star-d" value="2"/>
      <label for="star-d"></label>
  
      <input type="radio" name="stars" id="star-e" value="1"/>
      <label for="star-e"></label>
</div>

            
        </div>
        <div dir="ltr" class="textarea">
            <textarea name="Comment" cols="30" placeholder="Describe your experince in the website"></textarea>
          </div>
          <div  class="btn">
            <button type="submit" name="submit">Send</button>
          </div>


        </form>

    </div>

Give this code a try.

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

Why isn't the click event triggering MVC 5 client-side validation for ajax posts?

To incorporate client-side validation with a click event for ajax posts, I followed a guide found at the following URL: Call MVC 3 Client Side Validation Manually for ajax posts My attempt to implement this involved using the code snippet below: $(&apos ...

javascriptjqueryajaxvalidationasp.net-mvc-5

Several functions linked to a single prop in Vue

The reference material can be found here: https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model seems a bit confusing to me regarding how to link multiple events to the same component: In: https://codesandbox.io/s/da ...

javascriptvue.jsvuejs2vue-componentdom-events

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

htmlcss

I'm struggling to understand the purpose of using response.on

I have a code snippet here and I am curious about the functionality of "response.on" and why we are passing "data". What does this "data" represent? Also, could you explain what ".on" is specifically used for in this context? const express = require("exp ...

javascriptnode.jsexpressnode-modules

Transmit information from a JavaScript AJAX function to a JSP page

My current goal involves a user clicking on a link on the home page, let's say /home.jsp. Upon clicking this link, I extract the value and use it to call a RESTful resource that interacts with a database and returns a response. The communication with ...

javascriptjqueryajaxrestjsp

Passing JSON information through PatternLab

Incorporating an atomic pattern and passing data from a JSON array is my goal. Below are the code snippets and JSON file. anchor-link.mustache <a href="{{ url }}" class="{{ class }}">{{ label }}</a> footer-nav.mustache <ul class="menu ve ...

javascriptmustachepatternlab.io

Creating a drop-down menu in HTML with PHP and MySQL integration

I'm currently working on populating a list into a drop-down menu, but right now it's displaying each name in its own separate drop-down. I'd like to have all the names listed in just one single drop-down instead. Any ideas on how I could ach ...

phphtmlmysql

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

htmlcss

What could be causing the issue with the custom Button component not functioning correctly on hover when using MUI Button alongside Tooltip

After creating a Custom Button that envelops a MUI Button to handle default props and other aspects, I encountered an issue that persisted despite simplifying the example. Below is the code snippet along with a link to a codesandbox for reference: CodeSand ...

javascriptreactjsmaterial-ui

Receiving an error stating that .startsWith() is not a function in react native

I'm having trouble searching for items using a search bar. The original items are in 'prod', but I keep encountering errors such as 'startsWith() is not a function' and sometimes '.toLowerCase() is not a function'. const ...

javascriptarraysreactjsreact-native

TypeOrm is struggling to identify the entities based on the directory path provided

Currently, I am utilizing TypeORM with NestJS and PostgreSql to load entities via the datasource options object. This object is passed in the useFactory async function within the TypeORM module as shown below: @Module({ imports: [TypeOrmModule.forRootAsy ...

javascriptnode.jstypescriptnestjstypeorm

Creating a fresh shortcut on the selenium IDE

Is there a way to customize shortcuts in Selenium IDE by modifying its code? For instance, I would like to set the shortcut ctrl + p for the action run test case, similar to how the save action is assigned ctrl + s. I've searched for the JavaScript ...

javascriptseleniumfirefoxfirefox-addonselenium-ide

How can I restrict the Bootstrap dropdown menu to only open downwards?

I'm encountering a minor issue with my Bootstrap Select Box on the following Website As you scroll up and down the page, you'll notice that the dropdown opens in both directions, which is causing disruption. I'm not sure if this is a bug ...

htmlcssdrop-down-menuhtml-selectbootstrap-4

Retrieving information from an Express.js API using React.js. Postman requests are successfully communicating with the API

Hey there, I'm facing a little issue and could use some help. I have an Express application that is working perfectly with requests from Postman (adding, deleting, etc.). Now, I want to connect my client side (React.js) with the existing API using the ...

javascriptreactjsrestexpresspostman

Refining the nodes and connections within a directed graph by implementing a filter triggered by clicking a button

I have successfully implemented a force-directed graph. My next step is to incorporate buttons in the main HTML data to enable further filtering. Unfortunately, I haven't been able to make it work yet. I would greatly appreciate any suggestions or gui ...

javascriptjqueryd3.jsgraph-visualization

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

javascripthtmlember.jsmodel

Disabled radio buttons are appearing as if they have been chosen

While working on customizing the styles of radio buttons in a form, I encountered an issue where disabled radio buttons appeared selected even though they were supposed to show as disabled. Here is the code snippet that I used: input ::-ms-clear { ...

htmlcss

Tips for retrieving text without a class or id using selenium and python

I am attempting to extract a list of variables (date, size, medium, etc.) from the following webpage using python/selenium: Getting the titles was straightforward with: titles = driver.find_elements_by_class_name("sln_lot_show") for title in titles ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Determine the availability of a distant website through AJAX requests

My website runs PHP's cURL to check the online status of 5 different URLs, however, this process tends to slow down the page load time significantly, especially if one of the sites being checked is not working. Someone suggested using jQuery's a ...

javascriptphpjqueryajaxcurl

AngularJS - Not binding $scope to the DOM

Recently starting out with Angular, I decided to practice by creating a simple website. One of the features I want to include is displaying the number of times a button has been clicked through data binding. Here's the controller code I've writte ...

javascriptangularjsscope