react-rnd icon indicating copy to clipboard operation
react-rnd copied to clipboard

Percentages for positions

Open rubenesque-code opened this issue 6 years ago • 7 comments

I'm using react-rnd 10.1.1.

My browser is: Chrome.

I'd like to be able to put in a percentage value for position as you can with CSS.

I don't think this is possible? If not, I guess this is an enhancement request!

rubenesque-code avatar Dec 01 '19 15:12 rubenesque-code

@ruben00001 is your issue fixed ?

harit2101 avatar Jan 07 '20 05:01 harit2101

@harit2101 it's not a big issue for me as I can just convert between px and %. But it seems like a feature that should be a part of react-rnd.

rubenesque-code avatar Jan 07 '20 18:01 rubenesque-code

I need this also, how did you make this work?

h0jeZvgoxFepBQ2C avatar Jul 20 '20 08:07 h0jeZvgoxFepBQ2C

@harit2101 it's not a big issue for me as I can just convert between px and %. But it seems like a feature that should be a part of react-rnd.

Can you please eloboarte that how you made it? I also want to do this.

akshaybosamiya avatar Aug 31 '20 12:08 akshaybosamiya

@harit2101 it's not a big issue for me as I can just convert between px and %. But it seems like a feature that should be a part of react-rnd.

Can you please eloboarte that how you made it? I also want to do this.

Are you asking how to convert between a % and px value? Simply get a % of window.innerWidth to convert to px.

rubenesque-code avatar Sep 11 '20 10:09 rubenesque-code

I have the same issue, the problem using window.innerWidth is that you have to listen to innerWidth changes and re-adapt your position based on this value.

For my use-case I want to print my view, but the values are not good since in print mode the screen width is not the same.

gamegee avatar Jul 15 '21 08:07 gamegee

@ruben00001 can you please help me,

here I am converting the element x-axis value in pixel and then changing it to percentage.

((d.x / parentElement.offsetWidth) * 100)

this works most of the time, but when we see the dragged text on large screens the position is not coming along perfectly.

raised a separate ticket for this too. https://github.com/bokuweb/react-rnd/issues/809

jai1331 avatar Jul 05 '22 10:07 jai1331