Rotating an HTML caret using CSS does not pivot from the center point

Is there a way to adjust my simple caret rotation to make it rotate from the center? What changes should I make?

const Wrap = styled.div`
  width: 100px;
  background: grey;

  span {
    display: block;
    transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(180deg)")};
    transition: all ease-in 0.2s;
  }
`;

export default function App() {
  const [open, setIsOpen] = React.useState(false);
  return (
    <Wrap isOpen={open} className="App" onClick={() => setIsOpen(!open)}>
      {open.toString()}
      <span>&#94;</span>
    </Wrap>
  );
}

https://codesandbox.io/s/angry-jackson-8rdcl?file=/src/App.js:90-541

javascriptcssreactjs

Answer №2

The span is currently undergoing rotation from its center point. However, the caret symbol within the span is not vertically aligned due to an excessive bottom margin: ^. You can address this issue by either defining a fixed height for the span to adjust the caret position or opting for a more appropriate glyph.

const Wrapper = styled.div`
  width: 100px;
  background: grey;

  span {
    display: block;
    transform: ${(props) => (props.isOpen ? "rotate(0deg)" : "rotate(-180deg)")};
    transition: all ease-in 0.2s;
    height: 13px;
  }
`;

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 in React JS to attempt a function multiple times using try/catch?

I wrote a function with try catch inside where I make a call to an API for a response. The response returns a Result object with some data. Occasionally, I need to retry the function if certain conditions are met, such as having no name but having a bundle ...

javascriptreactjstry-catch

What are the best ways to resolve the warning from webpack in Express?

I have set up webpack to bundle both the server and client side code... Below is my webpack configuration: const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin&a ...

javascriptangularwebpack

When it comes to printing, the @media rule for portrait orientation will not be effective if landscape orientation is also indicated

My goal is to create a div that will occupy the entire A4 page when printing, regardless of whether portrait or landscape mode is selected in the print dialog window. test.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssmedia-queries

The push() function is triggering an error where db._checkNotDeleted is referenced incorrectly as a

I'm attempting to save an object in the database. Here's the code snippet I've been using: app.post('/newOrderWithObject', (req, res) => { var msg = {"name":"Harry"}; push(ref(db,"test/orders&qu ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

Implementing Twitter Login with Vue, Vuex, and Firebase

Exploring a Twitter login option for my sports social media dashboard project, I followed a helpful tutorial. While I've successfully implemented the HelloWorld component and retained the app.vue and main.js components, I encountered an error stating ...

javascriptfirebasevue.jsauthenticationvue-router

What could be causing the .env.development file to malfunction in my Next.js application?

I am currently working on Jest and testing library tests. Let's discuss a component named BenchmarksPage. Please pay attention to the first line in its return statement. import { Box, capitalize, Container, FormControl, InputLabel, MenuI ...

reactjstypescriptnext.jsjwtenvironment-variables

Encountering an issue when attempting to save JSON data in the database: unable to convert object into a string

To summarize, my data is stored in Javascript: JSONdata = { name: form.name.value, address1: form.custa.value, address2: form.custa2.value, postcode: form.custpc.value, order: fullorder, cost: document.getElementById('total&ap ...

javascriptphpmysqlajaxjson

Version 2.7.2 of Chart.js now allows users to retrieve the value of a data point by

I need to retrieve the value for each point clicked on, but I am currently only able to get the value of the first line when I click on a point. The GetElementsAtEvent function provides me with an array of 3 active elements, but how can I specifically extr ...

javascriptjquerychartsmomentjs

Storing the translated value from angular translate into a global variable: a guideline

I've been grappling with this issue for quite some time now without much success. My goal: I'm attempting to store the value of an angular translation (using $translate) in a global variable so that I can later use it for assigning dynamic varia ...

javascriptangularjs

Adding text over an image in Tailwind without the need for absolute positioning is achievable

I'm struggling to position text over an image without using absolute positioning. It's working fine on large and small screens, but I'm having trouble with medium screens. I've searched for similar questions on Stack Overflow, but none ...

csstailwind-css

Scrolling automatically

I'm experimenting with creating a typing effect using JavaScript and the typed.js library, found here: My approach involves using a div as a container. However, I've encountered an issue - when the text reaches the height of the div, scroll bars ...

javascriptjqueryhtmlcss

The server is indicating that the validation for the user has failed due to the required field "foo" not being provided in the Node.js

An error message was received with the following details: "User validation failed: email: Path email is required., display_name: Path display_name is required." The error name returned is: ValidationError. The AJAX call code snippet is as follows: f ...

javascriptnode.jsexpressmongooselodash

Scaling CSS to fit both height and width (Stretch)

My content is contained within an 800x480 pixel box. When the window size changes, I want to achieve the following: Expand/Stretch the container to fill the entire screen Include all elements inside the container and maintain their relative positions I a ...

jqueryhtmlcss

In my Vue project, I am required to extract only the numerical value from a select option text and disregard the rest of the text

Currently, I am in the process of learning Vue and have taken on the task of creating a basic tax calculator. The challenge is to display the result in real-time without requiring a "show total value" button. Everything seems to be functioning well except ...

javascriptvue.jsv-model

How can I change a PHP for loop to Javascript?

Can the following code be converted to JavaScript? for (let lift of liftDetails) { document.write('<option>'+ lift["LiftMakes"] +'</option>'); } ...

javascriptphpforeach

Exploring the world of animations with Framer Motion and its diverse range of effects on mapped

Struggling to loop over some data and map them onto an animated SVG morph, but each component instance has unique paths. Framer motion seems to animate them all the same regardless of their individual paths. How can I create different animations for each ...

reactjsanimationframer-motion

Is it possible to establish communication between JAVA and Javascript using Sockets?

Recently, I developed a Java application that generates some data and saves it in a text file on my computer. Instead of saving this data in a text file, I am looking to send it via Socket. Here is an example: Java public static void main(String argv[] ...

javascriptjavanode.jssockets

What separates the act of passing this.state to produce from not doing so in Immer.js?

Can someone help me understand the distinction between these two lines of code? this.setState(produce((draft) => { draft.name ='name'} versus this.setState(produce(this.state, (draft) => { draft.name ='name'} I would appreciat ...

reactjsstateimmutabilityreact-stateimmer.js

Converting an Array of Objects into a single Object in React: A Tutorial

AccessData fetching information from the database using graphql { id: '', name: '', regions: [ { id: '', name: '', districts: [ { id: '', ...

reactjstypescriptlodashcode-generation

Arrange the table by adding and editing before and after appending

I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...

javascriptjqueryhtml