CODEWITHSUNDEEP
cssreactjstypescriptsass
Knows Not Much
Knows Not Much

Reputation: 31526

Not able to set the relative position of Divs

I am doing a Analog clock project in React, Typescript and SCSS. My objective is to write as much CSS in the SCSS file and inline CSS minimally. (or not at all).

I wrote this SCSS file 

.dial-style {
  position: 'relative';
  top: 0;
  left: 0;
  width: 200;
  height: 200;
  border-radius: 100%;
  border-style: solid;
  border-color: #000;
}

.second-hand-style {
  position: 'relative';
  top: 50%;
  left: 50%;
  border: 1px solid red;
  width: 40%;
  height: 1;
  transform-origin: 0% 0%;
  background-color: #ff0000;
}

.minute-hand-style {
  position: 'relative';
  top: 100;
  left: 100;
  border: 1px solid grey;
  width: 40%;
  height: 3;
  transform-origin: 0% 0%;
  background-color: grey;  
}

.hour-hand-style {
  position: 'relative';
  top: 100;
  left: 100;
  border: 1px solid grey;
  width: 20%;
  height: 7;
  transform-origin: 0% 0%;
  background-color: #808080;
}

And my Typescript React component looks like

import * as React from 'react'
import '../styles/style'

export class AnalogClock extends React.Component<AnalogClockProps, AnalogClockState> {
  constructor(props: AnalogClockProps) {
    super(props)
  }
  render() {
    let secondsTransform = {
      transform: 'rotate(' + ((this.props.currentTime.getSeconds() * 6) - 90).toString() + 'deg)'
    }
    let minuteAngle = (this.props.currentTime.getMinutes() * 6) + (this.props.currentTime.getSeconds() / 60)
    let minutesTransform = {
      transform: 'rotate(' + (minuteAngle - 90).toString() + 'deg)'
    }
    let hoursAngle = (this.props.currentTime.getHours() * 30) + (this.props.currentTime.getMinutes() / 2)
    let hoursTransform = {
      transform: 'rotate(' + (hoursAngle - 90).toString() + 'deg)'
    }    
    return (
      <div className="dial-style">
        <div className="second-hand-style" style={secondsTransform} />
        <div className="minute-hand-style" style={minutesTransform} />
        <div className="hour-hand-style" style={hoursTransform} />
      </div>
    )
  }
}

interface AnalogClockState {}
interface AnalogClockProps {
  currentTime: Date
}

My clock appears like

enter image description here

No matter what I put for top, left, width, height. the position of the hands of the clock does not change at all. it just remains pinned at the top of the screen. What am I doing wrong?

Upvotes: 1

Views: 78

Answers (1)

Phillip
Phillip

Reputation: 6253

You have to add units to width, height, top and left. I reckon you're trying to use pixels, then add px:

top: 100px;

Also, no quotation marks in 'relative':

position: relative;

Upvotes: 1

Related Questions