Building widgets using Dojo popups

8
Update3 Okey i promise i won't edit this question anymore ;] But I found out that switching themes from Dutch to default removes this problem completly. Thus somewhere in the Dutch theming lies a problem with dojo popups. Update2 I tried expanding this widget with another dojo widget that makes use of dijitPopup class (TimeTextBox) and i found the same issue again. The popup is coupled to the navBar. This makes me believe that the navBar is rather extreme in building itself, or the building of the widgets happens in the wrong order. I am wondering is this a known issue, as some Mendix widgets are based on dojo widgets, if so what is the work around (besides building it anew ?) Reaction to comment 1: It only happens if i use original dojo widgets, thus when i use the showTooltip the tooltip is shown just fine. However, some dojo widgets are combination of other dojo widgets which are quite usefull, such as the TimeTextBox. Because this is a dojo widget it makes use of the dojo popup managemen. When looking in the dom manager of firebug these popup's are added in the body rather then in the designated div. For an unknown reason all these popups are placed at the same height on the navBar, but on the width of the object that they should be coupled too, i.e. the day clicked. Because all the popups are created on the same height (y position) as the navBar i assumed that they are coupled to the navBar somehow. But this is uncertain at its best as i have no idea if they are actually coupled or how the navBar is created. Returning to my question at hand, is the fact that dojo popups are created at the same height as the navBar and directly in the body a known issue and if so is there a workaround or a way to set it straight? As i am still trying to build widgets in my spare time i decided to try to use dojo widgets however i am finding myself with some trouble when i try to position a dojo popop or more specifically a dijit.TooltipDialog. The height of the popup is always set to the height of the navbar. Furthermore, the popup is not even coupled to the content pane but rather to the navbar as scrolling down will also scroll the popup down.This would also explain the height problem. I think i saw a similar problem with the referencekit widget (allthough i cannot seem to find it anymore in the store). Does anyone else have any experience with this, or does anyone from Mendix know why this issue occurs or how i could bypass this? Update1: i added a screenshot to visualize my problem. To get the tooltipDialog (popup) i press one of the days in the large calendar, in this case juli the first. As can be seen, the dialog pops up at the right width but not at the right height. This happens because it is linked to the navbar. I tried 2 different methods to pass the node to the tooltipDialog. In the first the around node is set during creation of the tooltip and in the second it is set on opening the tooltip. Either way i get the same result. The createTooltip method is called on the _onDayClick method of the calendar. createTooltip:function(event){ dijit.popup.close({popup: this.tooltip}); this.tooltip = new dijit.TooltipDialog({ around: event.target, title: "New Event", style: "width: 300px", content: "Hi i am wondering what this will look like if i create a tooltipDialog" }); dijit.popup.open({popup: this.tooltip, around: event.target}); },
asked
4 answers
4

Hi Pieter,

Can you show me the code where you call the tooltipDialog? I believe you have to pass a node for it to attach to when you call it.

I'll check my own use of it tomorrow to see if I can help ya out.

Edit: I'm not familiar with the dijit tooltip but we do have our own version of it:

mendix.widget.showTooltip(myNode, e.target);

Can you try that?

answered
3

Reaction to reaction on comment 1:

A work around is to find the y coordinate you need, which should be the top or y property of dojo.coords(e.target) or dojo.marginBox(e.target).

this value found can be applied to the popup node, by using dojo.style. In not-completely-pseudo-code

var coords = dojo.coords(e.target, true); *
var popupNode = //find the popup node to correct somehow
dojo.style(popupNode, { position : 'absolute', 'zIndex' : 10000, top : coords.top, left : coords.left }); **

* you might need to add a second boolean parameter to correct for scrolling, just try the values true or false.

** I am not sure whether you need to use the top/left or x/y properties.

answered
3

We encountered this problem with several other widgets as well, it seems to happen only with the Dutch theme. So switching to one of the other themes might solve the problem.

answered
0

I got an additional question that also concerns developing widgets with dojo. When you create a widget it is possible to set a dojoType in the template. This allows for quick reuse of existing widgets. Are mendix widgets also accesable like that and if so how can this be achieved?

answered