Skip to Content (Press Enter)
OutSystems.com
Personal Edition
Community
Support
Training
Training
Online Training
Developer Schools
Boot Camps
Certifications
Tech Talks
Documentation
Documentation
Overview
ODC
O11
Forums
Forge
Get Involved
Get Involved
Jobs
Ideas
Members
Mentorship
User Groups
Platform
Platform
ODC
O11
Search in OutSystems
Log in
Get Started
Back to Forums
Rui Molefas
1
Views
7
Comments
Need some help with CSS "position; fixed;" behavior
Question
Hello all,
im experiencing some odd behavior with the "position: fixed" property.
Im generating some popup using some javascript but i cant seem to fix it to the window. The properties show up correctly but nothing seems to happen no matter what i change.
I attached a simple example.
Am i doing something wrong or is this some bug?
Thank you,
Rui Molefas
JavaScriptTest_fixed_popup.oml
João Rosado
Staff
Hi Rui,
Well your example worked in my browser (firefox).
The popups stays centered on my screen depending on the window size.
By looking at the javascript I would say that it's probably either the document.documentElement.clientHeight or the $('.popupList').height() methods.
Are the top and left properties being set with the correct values? I had alot of bad experiences on all the height methods, even when using the jQuery wrappers.
Btw, not directly related, but I notice you still have the centerPopup being dumped in all the block iterations, instead of having it on the block javascript with the extra parameter like I sugested last time :)
Regards,
João Rosado
Edit: are you running on .net or java?
Rui Molefas
João Rosado wrote
:
Hi Rui,
Well your example worked in my browser (firefox).
The popups stays centered on my screen depending on the window size.
By looking at the javascript I would say that it's probably either the document.documentElement.clientHeight or the $('.popupList').height() methods.
Are the top and left properties being set with the correct values? I had alot of bad experiences on all the height methods, even when using the jQuery wrappers.
Btw, not directly related, but I notice you still have the centerPopup being dumped in all the block iterations, instead of having it on the block javascript with the extra parameter like I sugested last time :)
Regards,
João Rosado
Hi João,
I know about the useless code, i just used the last test project to make this one, didnt pay much attention to it. I asure you the real application's code is all nice and clean ;)
About the behavior, im not trying to center the popup, that works fine, im trying to keep both the popup and the greyed out background fixed to the browser window, meaning that any vertical scroll wouldnt "leave them behind". Is that how it is behaving on your end?
Thanks a lot!
Rui Molefas
Can anyone else test this, plz?
Thank you!
João Rosado
Staff
Hey Rui,
Yes, it is working for me.
The Background div fills all my screen and keeps up with the scrolling.
Only problem I can see is just your javascript not supporting window resizes.
Tested in Firefox(nightly), Chrome and IE.
Amazingly it even works on IE7 ...I really was not expecting the
height() calculations to be
working there.
Regards,
João Rosado
Rui Molefas
Thank you again João.
Thats realy not the behavior im getting, tested on all browsers, including Ubuntu and Windows OS.
I think your browser is performing a miracle :D
You didnt change anything on the file I uploaded right?
Thank you,
Rui Molefas
João Rosado
Staff
Hi Rui,
Didn't change anything from your file, just published it on my local server.
You can see a little video attached. I'm doing something wrong?
Note: my server is in 7.0, but there are no rendering differences between versions.
Regards,
João Rosado
2012-06-26_2133.swf
Rui Molefas
Wow, thank you for taking the time to make a video.
Well thats realy not whay im experiencing, im not sure why...ill look into it, now i know it should work.
Anyway thank you a lot for the time and help.
Rui Molefas
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
See the full guidelines
Loading...