Section jumps to left of screen

Hi, thanks for trying my plugin! ??

I checked your site but I don’t see the plugin active on there, so I can’t see what the issue is exactly unfortunately. Any chance you can turn it on again temporarily so I can have a look?

Hey,

Sorry, it was bugging me quite a bit. So turned it off. Just turned it back on for you.
Thanks for helping.

And… nice hat!

??

Got it! I see the issue now. Not sure about a solution, but let me look into it, give me a day or so.

Obviously you shouldn’t have this active on your live site, so I suggest you either put the plugin in Legacy Mode (a setting in the plugin options), or if that doesn’t work, disable it for the time being.

Having said that, if it works in Legacy Mode, then there’s not really a reason to fix anything, so can you try that first?

Hey,

Thank so much for replying so fast.
I set it in legacy mode. And it works fine. So, i guess its fixed.
But maybe still interesting for you to investigate. ??

Have a great day!

Regards,
Robert

Glad it’s working now! I tried looking into why it wasn’t working before, but I’m not 100% sure. I believe the positioning (absolute/relative) has something to do with it, but I can’t test anything anymore now that you’ve changed it.

I’ll try to reproduce it on my local system to see…..but since it’s working for you now, there’s no hurry in that. ??

Hey,

Welcome to a new monday. But, I just had bad news. Or, I found a reason we might still have to dig into it… sorry…

So, the thing is, when its not sticky when selecting the dates there is a datepicker popup.
However, once the element is sticky the popup disaspears. Oh ohhhh…

You have any idea how to get this working?

Regards,
Robert

Yeah, I can see why that happens. Because of bugs like these, I changed the whole method of stickiness in version 2.0. The legacy mode is basically the old method, so yeah, in order to get that functionality working, you’d need to go back to the normal mode.

And that one wasn’t working because the block was positioned using absolute positioning. If you’d change that (removing position:absolute and the left/top positioning), things might work better. Can’t tell for sure; unfortunately, I can only see what’s wrong when the problem is actually present, but I understand that you don’t want to have a broken site for all too long.

If you CAN disable legacy mode and you’re OK with having a broken site for a short period, let me know and I’ll give it a look (please DO enable the Debug mode in the plugin, which will make it easier for me to see what might be the issue). But regardless; you’ll need to remove the absolute positioning for sure in order for this to work.

• This reply was modified 8 years, 6 months ago by Senff - a11n.

Hey Mark,

Thank you. I don’t really mind having a broken site for a bit. Because its not really live to the audience yet. So, what I did:
1. Turned off Legacy mode
2. Looked at the CSS of the sticky element, but I cant find position:absolute anywhere. What i find in: sticky-element-placeholder sticky-element-active
is:
display: block;
float: none;
flex: 0 1 auto;
box-sizing: border-box;
clear: none;
overflow: visible;
transform: none;
width: 370px;
height: 525px;
margin: 39px 0px 30px 0px;

The good news is, when it is not set in Legacy mode the datepicker does pop up.
All I have to do is work out the positioning.

Wanna help pls?

Regards,
Robert

So this is where I see the absolute positioning:

.booking_form_request {
    position: absolute;
    top: 0px;
    right: 0px;
    box-sizing: border-box;
    color: #747c83;
    margin: 0px 0px 30px 0px;
    background-color: #fff;
    max-width: 370px;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #e7e9ef;
    padding: 30px 30px 30px 30px;
    margin-top: 39px;
}

(line 5893 in https://www.fincastico.com/wp-content/themes/wprentals/style.css?ver=4.6.1)

I’m fairly sure that’s not the main reason why it’s not working though, but it might be a start. Also, aside from removing the absolute positioning, it may be beneficial to add “float:left” to “.booking_form_request“.

Please don’t forget to turn on Debug Mode in the plugin, that will also help me. ??

• This reply was modified 8 years, 6 months ago by Senff - a11n.
• This reply was modified 8 years, 6 months ago by Senff - a11n.

Hey Mark,

Thanks. So, I turned on the debug mode.
I added the following to the custom css overide file:
.booking_form_request {
position: absolute!important;
top: 0px!important;
right: 0px!important;
}

But nothing really is happening… its still jumping. Just differently.

Hope Im of any help… but hope more so that you can be!

Regards,
Robert

Hi Robert,

The point is to get rid of the absolute positioning. Sorry if that wasn’t clear. ??

Can you add the following (instead of what you just added) to the custom CSS override?

.booking_form_request {
    position: static;
    top: auto;
    right: auto;
    float:left;
}

Hey Mark,

Stupid me huh. Sorry about that.
So I changed it as you requested.

But… still… unfortunately!

Getting there…..

First, please do NOT use “!important“. It will make it impossible for the plugin to position the sticky element properly.

Second, you may want to disable the stickiness for screens smaller than 992 pixels. Since the block is pretty large, I don’t think you should make it sticky on smaller screens, as it will obscure pretty much everything else.

Got there…

I removed the important and… you are… for me so far “as always”… right!
It works like a charm. I was going to set the mobile later, because I didnt know what kind of screen you were working on. But if you advise 992, I do it!

Thanks so much mark! Honestly appreciate it.
Works like a charm!

Regards,
Robert

Fantastic! Glad I could help. ??