How can you use the transform property in CSS to rotate the dropdown arrow by 180 degrees and move it vertically by 2 pixels?

gradeexpanded:false,

                    gradeOnClick: function (event) {
                        this.gradeexpanded = !this.gradeexpanded;
                    },

.dropdown-check-list {
  margin-left: 35px;
  display: inline-block;
}
.dropdown-check-list .anchor {
  width: 300px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px 10px 10px;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border-top: none;
}
.dropdown-check-list ul.items li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  padding-top: 8px;
  border-bottom: 2px solid #F0F0F0;
  background-color: #ffff;
}
.dropdown-check-list.visible .items {
  font-size: 14px;
  height: 325px;
  width: 300px;
  background-color: #ffff;
  display: block;
}

.gradeexpanded{
  transform: rotateZ(180deg) translateY(2px);
}
 <div
            class="dropdown-check-list"
            :class="{ visible: gradeexpanded }"
            tabindex="100"
          >
            <span class="anchor" @click="gradeOnClick"
              >Gtest</span
            >
            <ul class="items">
              <div class="checkbox-alignment-form-filter">
                <input
                  type="checkbox"
                  id="HR 2062 : 2011"
                  class="vh-product" value="H2011"
                  v-model="checkedNames"
                />
                <label class="productlist-specific" for="HR 2062 : 2011"
                  >H2011</label
                >
              </div>
              <div class="checkbox-alignment-form-filter2">
                <input
                  type="checkbox"
                  id="E250A"
                  class="vh-product"
                  v-model="checkedNames" value="E250A"
                />
                <label class="productlist-specific" for="E250A">E250A</label>
              </div>
           </ul>
           </div>

https://i.sstatic.net/3rraD.png

Using transform: rotateZ(180deg) translateY(2px); css Property how to rotate the dropdown arrow.

I have written below code for dropdown code in html and css, As shown in the picture below i am unable to rotate the arrow icon accordingly.

Issue is at present, weather the dropdown is open or not, it is maintaining in the same state.

htmlcssvue.js

Answer №1

Here is a suggestion for adding some custom CSS:

.dropdown-check-list.visible > span.anchor:after {
  transform: rotate(45deg);
}


const dropdown = document.querySelector(".dropdown-check-list");

dropdown.addEventListener("click", function () {
  this.classList.toggle("visible");
});
.dropdown-check-list {
  margin-left: 35px;
  display: inline-block;
}
.dropdown-check-list .anchor {
  width: 300px;
  color: #262626;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 40px 10px 10px;
}
.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border-top: none;
}
.dropdown-check-list ul.items li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list.visible .anchor {
  padding-top: 8px;
  border-bottom: 2px solid #f0f0f0;
  background-color: #ffff;
}
.dropdown-check-list.visible .items {
  font-size: 14px;
  height: 325px;
  width: 300px;
  background-color: #ffff;
  display: block;
}

.dropdown-check-list.visible > span.anchor:after {
  transform: rotate(45deg);
}
<div class="dropdown-check-list" tabindex="100">
  <span class="anchor">Gtest</span>
  <ul class="items">
    <div class="checkbox-alignment-form-filter">
      <input type="checkbox" id="HR 2062 : 2011" class="vh-product" value="H2011" />
      <label class="productlist-specific" for="HR 2062 : 2011">H2011</label>
    </div>
    <div class="checkbox-alignment-form-filter2">
      <input type="checkbox" id="E250A" class="vh-product" value="E250A" />
      <label class="productlist-specific" for="E250A">E250A</label>
    </div>
  </ul>
</div>

Answer №2

In order to style a dropdown arrow, you can use a pseudo-element that is an inline element. However, the Transform property cannot be applied to inline elements. To resolve this issue, simply set your dropdown arrow's display property to block and it should function correctly.

.dropdown-check-list .anchor:after {
 ...
 display: block;
}

Answer №3

Could you take a look at the code provided below? It should be helpful for your needs.

Here is the code snippet:

.dropdown-check-list.gradeexpanded .anchor:after{
    transform: rotate( 45deg);
    -webkit-transform: rotate( 45deg);
    transform-origin: bottom left;
}

Answer №4

Are you saying that you will be toggling the gradeexpanded class on the parent div? In that case, the CSS class should be .gradeexpanded .achor:after, correct?

.gradeexpanded .anchor:after {
   transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
   transform-origin: bottom left;
}

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

Is there a way to incorporate a computed value into a table prop while working with Element UI?

In my frontend development, I am utilizing vuejs along with element ui. I am faced with the task of rendering a table that includes dates in unix format. To make these dates more user-friendly, I have incorporated moment.js to convert them into a readable ...

javascriptvue.jselement-ui

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

javascripthtmlcssfunctiontemplates

Woocommerce Dual Column Payment Portal

I prefer a two-column layout for the checkout process on www.narwal.shop/checkout Here is the code I added: /* Large devices (large desktops, 1200px and up) */ @media (min-width: 993px) { /* --------------------- WOOCOMMERCE -------- ...

csswordpresswoocommercecheckout

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

Utilizing vue-property-decorator: Customizing the attributes of @Emit

After seeing the @Emit feature, I checked out the example on GitHub. import { Vue, Component, Emit } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { count = 0 @Emit() addToCount(n ...

typescriptvue.js

The issue persists with Vuetify app bar when attempting to hide overflow

Having an issue with the overflow hidden property not working as expected. It seems to create an extra scroll bar, similar to what is shown in this image. I directly copied the code from the Vuetify website and tested it out on CodePen, but encountered th ...

vue.jsvuetify.js

Issue with applying v-bind in CSS not resolved during initial rendering in Nuxt3

I have designed a visual component with the intention of making it versatile for reuse in various scenarios. To enable different options, I utilized v-bind in the CSS. However, I noticed that these options are not being applied during the initial renderin ...

vue.jsnuxt.jsvuejs3nuxt3.js

Performing a simulated click on a dynamically inserted element using pure JavaScript

I am faced with the challenge of programmatically navigating a ReactJS-based website in a looped workflow. The process involves clicking on Element1, dynamically altering the web page to add Element2, then clicking on Element2, and so on until eventually r ...

javascripthtmlreactjs

Attaching Picture From Array To Vue

Is it possible for me to request assistance? I'm wondering how to bind an image to a vue component or more simply, how do you render an image from an array in vue? Allow me to share my code with you and explain in detail how I have approached this. W ...

javascriptvue.js

An issue with excess whitespace appearing below the footer while adjusting the size of the webpage

I have a database table on my website that I am styling with the help of bootstrap. Check out this screenshot for the issue: https://i.sstatic.net/CUkjz.jpg For the HTML code, you can view it here: And for the relevant CSS, click on this link: I used pa ...

htmlcssbootstrap-5

A guide on simulating an emit event while testing a Vue child component using Jest

During my testing of multiple child components, I have encountered a frustrating issue that seems to be poor practice. Each time I trigger an emit in a child component, it prompts me to import the parent component and subsequently set up all other child co ...

javascriptunit-testingvue.jstestingjestjs

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

I'm a beginner when it comes to JavaScript and Angular. I am attempting to use ng-show and ng-hide for my background and text elements. However, I am experiencing an issue with my text: It smoothly hides, but when it is shown again, the text appears b ...

javascriptcssangularjsng-animateng-show

Newcomers to Visual Studio Code facing a problem with images not displaying

As a beginner in all aspects, I am currently facing an issue with displaying an image on Visual Studio Code. The problem arose when I tried to create a separate folder for the image, which resulted in a cascade of subfolders that only made things worse eac ...

htmlcssimagebootstrap-5

Issue with Fluid Square Divs and Box-Sizing

I'm currently working on creating a responsive fluid div that maintains its square shape as the page is resized. I've come across a method that involves using the following CSS code: div{ width:25% padding-bottom:25%; } However, it seem ...

htmlcss

What is the process for adding a download link to my canvas once I have updated the image?

Is it possible to create a download link for an image that rotates when clicked, and then allows the user to download the updated image? Any help would be appreciated.////////////////////////////////////////////////////////////////////// <!DOCTYPE ht ...

javascriptjqueryhtmlcsscanvas

problem specifically occurring on tablets with fixed positioning

Have you checked out the site I'm referring to here? An unusual issue seems to be occurring specifically on tablets. We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all de ...

jqueryioscssipadtablet

Emphasizing hyperlinks according to the user's scrolling location

Currently, I am attempting to create a feature where links are highlighted when the user scrolls over the corresponding section on the page. However, there seems to be an issue with the functionality as Link 2 is highlighting instead of Link 1 as intende ...

javascriptjqueryhtmlcss

The browser is struggling to interpret the incorrect HTML content

I am looking for a way to create a function that can retrieve account data from my database and organize it in a user-friendly HTML table where users can make selections and modifications. The code I have so far is as follows: $.ajax({ url: "./dat ...

javascripthtmldom

Step-by-step guide on fetching blog posts from a Ghost blog by utilizing the API in a Vue cli project

I'm currently working on my Vue cli project and I am trying to showcase all the posts from a Ghost blog using the API. Unfortunately, the example provided on the page is for a nuxt project. Once we have called the dependencies and authenticated with ...

javascriptvue.jsvuejs2async-awaitvue-component

Changing the fill color of an SVG pattern remains unchanged

I have been working with Vue.js to create SVGs with shape patterns as background. The patterns themselves are functioning correctly, but I am encountering an issue when attempting to dynamically change the color of the pattern filling by passing props. D ...

javascriptvue.jssvgsvg-pattern