how to fix position drag draganime div on small screen

AaronDavidNewman / Smoosic

A music notation editor written in javascript

Other

100 stars 14 forks source link

how to fix position drag draganime div on small screen #27

Closed gmirza786 closed 3 years ago

gmirza786 commented 4 years ago

Hi @AaronDavidNewman,

hope you doing Well!

I want to fix draganime left position on small screen

please help me

You can see in attached screen shot:

Thanks, Gulfam Mirza

vgulshan1985 commented 4 years ago

@AaronDavidNewman

I am also having same issue. Can you please help in that too?

Thanks, Gulshan

AaronDavidNewman commented 4 years ago

I'm sorry guys I'm not following what the problem is. Can you maybe post an animated GIF. Also, what is the resolution where you start seeing this?

gmirza786 commented 4 years ago

Yes Sure

I request to you please provide me better solution Thank You! See This Bildschirmvideo-aufnehmen-2020-08-05-um-16 23 46

vgulshan1985 commented 4 years ago

@AaronDavidNewman Same issue is happening on my side. Can you please help in that?

vgulshan1985 commented 4 years ago

@AaronDavidNewman Can you please check to this and help ?

AaronDavidNewman commented 4 years ago

Sorry guys, I thought I responded to this, but I don't see it. Maybe forgot to save.

I don't see this in Smoosic no matter how small I make the screen, so I'm guessing this has to do with your custom changes and not screen size. In my application, the divs: .attributeDialog' and '.draganime' are at the same level in the DOM, and origin at offset left:0, top:0 of the web page. So when you drag, the logic uses the same offset value of '.attributeModal' on '.draganime'. If these offsets are different in your DOM, you need to make that adjustment in the dragging logic in htmlHelpers.draggable.

Also, make sure the parent containers of these divs are position:relative, so the position:absolute does the expected thing. In Smoosic this is '.dom-container'. It looks like the value of the dialog itself in '.attributeModal .attributeDialog' is calculated correctly, so once you make this change you should be OK.

SmoosicDOM

AaronDavidNewman commented 4 years ago

Here's your problem:

SmoosicDomLeft

'!important' will win over element styles, every time. Avoid using it - it was required in the IE6 days, not so much now.

Now the dragging scales correctly, but you still need to consider the offset so the initial position of dialog and '.anime' div are correct (treating UL of form as 0,0, instead of page 0,0).

vgulshan1985 commented 4 years ago

@AaronDavidNewman We have made change and still it has issue. Popup has to be come in center.

vgulshan1985 commented 4 years ago

@AaronDavidNewman If you can help will be good., This is the last step where we are stuck.

AaronDavidNewman commented 4 years ago

If you pull my latest changeset, I added logic to handle .dom-container that is not at origin. It should fix your issue also.

AaronDavidNewman commented 3 years ago

@vgulshan1985 how is this working, I'd like to close the ticket