Focal Point
[SOLVED] App Studio Calendar Control Issue

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/4137056776

August 05, 2015, 11:09 AM
MAdams1
[SOLVED] App Studio Calendar Control Issue
I'm having a problem with the calendar control in App Studio. One; it appears to be a lot larger than in Dev Studio. Two; I can't seem to find any setting that will bring the date picker in front of the report frame. I have right clicked on the frame and sent it to the back and right clicked on the calendar image to send it to the front. I've played with the Z index also. Nothing I do seems to be working. Anyone else have any ideas?? Thanks in advance!

Calendar Control Issue - Image

This message has been edited. Last edited by: <Kathryn Henning>,


WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML
August 05, 2015, 11:43 AM
Tony A
Hi Michele,

I've tried this using App Studio 8.1.04 and do not have any issue. I created a report as TABLE FILE GGSALES ... WHERE DATE FROM ... TO ... and then used that as an external referenced report in a new HTML document. I changed the control type to "Calendar" from "Edit Box" on initial import and, as you can see from the screen shots, the calendar controls work fine.



T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 05, 2015, 12:38 PM
MAdams1
Thanks Tony. On first run of the launch page the calendar works great, however, when there is output in the iframe and then I click on the calendar again to pick a different date, the calendar is shoved behind the iframe for some reason. It's not ideal to reset the form everytime I want to pick a different date but that's the only way it seems to work for me.

Here is what it looks like on the first use of the html page.

First time used

And why is it so huge??


WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML
August 05, 2015, 12:42 PM
Francis Mariani
Is there custom CSS being applied to the report in the iframe that might be causing the issue?


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
August 05, 2015, 01:53 PM
MAdams1
Francis, We use a style sheet that we created on all of our reports. It basically sets the font and size etc for headings, footings, etc. I don't see anything that would affect this. Is there something in there I should be looking for?


WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML
August 06, 2015, 05:33 AM
Tony A
I would be inclined to use the developer tools for your browser and explore the DOM to see the styling that is causing the issue. Just search for a div with a class of "ui-datepicker".

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 06, 2015, 05:45 AM
Tony A
You could try modifying the font-size on first loading. Add this to your embedded JavaScript to see if it helps. Change the size according to your needs -

function onInitialUpdate() {
  $(".ui-datepicker").css("font-size","7pt");
}

Changing the size will grow/shrink the calendar div so no need to change margins, padding etc.


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 06, 2015, 09:36 PM
Craig R.
Coincidence: Just today I opened a case because I noticed that when the calendar pops up, I can see the surrounding text boxes, radio buttons, etc., showing through!

Tony: Thanks for the tip on changing font-size! Played around and settled on 10pt.

Craig


v8.1.04, 64-bit Windows (Reporting Server), Apache Tomcat (Web/App Server), HTML, PDF, AHTML, Excel outputs
August 07, 2015, 03:46 AM
Wep5622
Instead of adding this code to your launch-pages every time, you could also add it to your sites' standard CSS file (if you have such a thing):
.ui-datepicker { font-size: 7pt !important; }

(The !important bit makes sure other applied styles can't override it)


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
August 07, 2015, 05:33 AM
Tony A
Craig,

Glad it worked for you until you can find out what is causing the display problems.

The only time I have seen display issues is when conflicting CSS has been introduced and the easiest way (I find) to locate the conflict is to use the browser developer tools.

Obviously the best method of correcting the display problem is to identify the conflict and work it out so that future problems do not arise!


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 07, 2015, 08:40 AM
MattC
Tony A - You have any magic in your hat that I can use to always display the calendar? Instead of having to click the icon to display the calendar.


WebFOCUS 8.1.05
August 07, 2015, 08:59 AM
Tony A
Matt,

Not something that I would recommend as there is only one "datepicker" div irrespective of how many calendar controls that you have.

Although you could use the jQuery trigger event on the class of the calendar icon -

$(".ui-datepicker-trigger").trigger("click");

However, choosing a date will close the calendar popup of course!

Edited: I need to mention that, if you have two or more calendar controls then each one will have an icon with the "ui-datepicker-trigger" class and this code will therefore cause the "click" event for each one. The downside of this is that if you close the calendar popup without choosing a date, the last day for the month and year in the popup will be used to populate the date text control.


T

This message has been edited. Last edited by: Tony A,



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 07, 2015, 12:05 PM
MattC
Tony - Thanks. That's not a bad idea. I only have a single calendar that refreshes the panels. To prevent it from not going away. I hid the calendar image by using JS

 
function onInitialUpdate()
{
    var images=document.getElementsByTagName("img");


    var numImages = images.length;


    var i = 0;
     for (i=0;i<numImages;i++){
         if (images[i].src.indexOf("dynCalendar.gif")>0)
                                  {
                                   images[i].style.visibility  = 'hidden';
                                 }
                              }


$(".ui-datepicker-trigger").trigger("click");
}

 



Not sure if this is possible since it's a Gif, but I would like to move the mouse over from the actual calendar to the gif to refresh the pages in the portal. But.... all this new task and animations is all under the covers.

Any thoughts?




WebFOCUS 8.1.05
August 10, 2015, 03:05 AM
Tony A
Hi Matt,

The only thing that I would suggest is that, if the normal function of "out-of-the-box" controls isn't doing what you need it to, then you need to look at building your own. Not that you couldn't (potentially) accomplish what you need to do by altering or over-riding functions, more a case of future expectations in an upgrade. If you mess with the designed processes then do not expect them to work in future. If you "grow your own" then you (again potentially) have more control over the function.

Changing simple things such as styling by overriding attribute values via JavaScript is one thing, but changing the complete functioning of mouse overs and triggers needs to be thought about very deeply!


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 10, 2015, 07:58 AM
MAdams1
Thank you so much Tony for the code. I was having a time trying to get the date picker to appear smaller. This worked perfect!


quote:
Originally posted by Tony A:
You could try modifying the font-size on first loading. Add this to your embedded JavaScript to see if it helps. Change the size according to your needs -

function onInitialUpdate() {
  $(".ui-datepicker").css("font-size","7pt");
}

Changing the size will grow/shrink the calendar div so no need to change margins, padding etc.


T



WebFOCUS Server 8.1.05
Windows 2008 Server
WebFOCUS AppStudio 8.1.05
Windows 7 Professional
IE 11 and Chrome Version 43.0.2357.124 m.
Mostly HTML, PDF, Excel, and AHTML
August 10, 2015, 09:01 AM
Tony A
Good to know that it helped Smiler

I would still be inclined to try and identify what styling is causing the conflict though using browser developer tools.

Also, check out the suggestion by WEP to make a global change in case you have more than one HTML page affected.


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
August 11, 2015, 08:24 AM
MattC
Tony - Thanks for the help. I opened a NFR yesterday to get an Onchange event to work on the calendar control. The event works if you change the edit box, but not the calendar.

I prefer not to go too custom on things.


WebFOCUS 8.1.05
August 11, 2015, 08:40 AM
Tony A
Matt, you are most welcome - hope that you get it to do what you need!

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10