search

pughpugh / react-countdown-clock

HTML5 canvas countdown clock React component
ISC License
187 stars 83 forks source link

Change <canvas> position attribute? #36

Closed 7022Andre closed 7 years ago

7022Andre commented 7 years ago

I am trying to change the position of the 2nd <canvas> element to relative so it'll display as a block rather than floating over my other divs (it is automatically set to: position: absolute). Already added a CSS selector without success but my custom always CSS gets overridden by the <canvas> style.

.react-countdown-clock canvas:last-of-type {
  position: relative;
}

Anyone who ran into the same issue and can help?

Thanks

pughpugh commented 7 years ago

I'm not totally clear on the scenario, so you are welcome to post some code. I would consider wrapping the whole element in a div and setting your positioning on the wrapper.

As for setting styles on the canvas, the styles in react are inline, so you might have to use an !important flag to override them.

.react-countdown-clock canvas:last-of-type {
  position: relative !important;
}
7022Andre commented 7 years ago

Thanks. I added a div around the countdown and gave it a height and then centered it (by adding padding) and that worked great.