voyent
Date Spinner in Safari Desktop not centered on the page  XML
Forum Index -> ICEmobile General
Author Message
bcantu

Joined: 02/Nov/2009 00:00:00
Messages: 45
Offline


I have found what I believe to be a bug in the CSS for the safari "BIG" screens. Looking at the CSS below the top value is 1086px which puts the date spinner at the bottom of the page:

div#promotionDetails:SpinnerStartDate_popup.mobi-date-container
position: absolute;
top: 1086px;
left: 857px;

Changing the top value to 70% puts the spinner roughly in the centre. I'm going to try and over write the TOP value in the CSS as a workaround but haven't been successful up to now... My CSS skills are not the strongest any suggestions? Many thanks in advance.

NOTE: the HTML used looks like the following:

Code:
 <h:outputLabel for="SpinnerStartDate" value="#{msg.advertiseStartDateLabel}: "/>
                                                     <mobi:dateSpinner id="SpinnerStartDate"
                                                                       useNative="true"
                                                                       valueChangeListener="#{promotionBean.changeStartDate}"
                                                                       value="#{promotionBean.startDate}"
                                                                       locale="#{promotionBean.locale}">
 
                                                         <f:convertDateTime type="date" pattern="yyyy-MM-dd"/> 
                                                     </mobi:dateSpinner>
                                                     <h:message for="SpinnerStartDate" style="width:30%;color:red" />
 
[Thumb - Screen Shot 2015-01-24 at 7.48.42 am.png]
 Filename Screen Shot 2015-01-24 at 7.48.42 am.png [Disk] Download
 Description Date Spinner at the bottom of the page. only visible when the browser is maximised
 Filesize 250 Kbytes
 Downloaded:  929 time(s)

philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


You won't be able to override the CSS by adding another style to the page as the popup styles are added inline. So those will always have precedence. You'll need to debug the mobi.panelAutoCenter() function to see why the popup placement calculation is being miscalculated on your page. Step through that function in the JS debugger and note the values of windowWidth, windowHeight, scrollTop, and contentHeight.

Thanks

.
bcantu

Joined: 02/Nov/2009 00:00:00
Messages: 45
Offline


windowWidth = 1244
windowHeight = 696
scrollTop = 224
contentHeigh = 670

looks like the formula below doesn't work. I removed the calculated value with the formula scrollTop /2 and that worked out correct for me. I don't know if the formula will work on mobile devices.

original:
contentElement.style.top = scrollTop + ((windowHeight / 2) - (contentHeight / 2)) + 'px';

solution:
contentElement.style.top = scrollTop/ 2 + 'px';
bcantu

Joined: 02/Nov/2009 00:00:00
Messages: 45
Offline


I tried to change the javascript in the packed jar but could not execute the jar because (most likely) of the warnings like :
11:08:39,107 WARN [org.jboss.as.server.deployment] (MSC service thread 1-3) JBAS015852: Could not index class __MACOSX/org/icefaces/mobi/utils/._TLDConstants.class at /content/HaystackWorksPrj.ear/HaystackWorks.war/WEB-INF/lib/icefaces-mobi.jar: java.io.IOException: Invalid Magic
at org.jboss.jandex.Indexer.verifyMagic(Indexer.java:389) [jandex-1.0.3.Final.jar:1.0.3.Final]
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


If you want to try that out, you can override the js function in your page like so:
Code:
 <script type="text/javascript">
 mobi.panelAutoCenter = function(clientId){
 ...
 }
 


The code, as is, seems ok to me though. Are those numbers above correct? Is the content height really 670px? Another version you might try is using the approach of 50% and adjusting the margin by the content dimensions:

Code:
 contentElement.style.top = contentElement.style.left = "50%";
 contentElement.style.marginTop = "-" + (contentHeight/2) + "px";
 contentElement.style.marginLeft = "-" + (contentWidth/2) + "px";
 //set position to absolute when content is larger than viewport to allow for scrolling 
 contentElement.style.position = windowHeight - contentHeight > 0 ? "fixed" : "absolute";
 

.
 
Forum Index -> ICEmobile General
Go to:   
Powered by JForum 2.1.7ice © JForum Team