If you look at the bootstrap demo that is hosted here And scroll down to the demo that has all 4 buttons. Now click on the left popover, it shows properly. However, When I shrink or extend the screen the popover is no longer anchored to the proper point. Is there a way around this?
This has to do with the container property for the popover.
http://jsfiddle.net/yvkhbw4b/1/
See the attached example. Show both popovers then resize the window from xs breakpoint to sm breakpoint. You will see the top item will seperate from the button as the container defaults to body. (I'm also setting it to body though options). The second item is attached to the parent div so that one remains attached to the element even though the breakpoint changed.
Documentation on popover options
Appends the popover to a specific element. Example: container: 'body'.
This option is particularly useful in that it allows you to position
the popover in the flow of the document near the triggering element -
which will prevent the popover from floating away from the triggering
element during a window resize.
$('#btn1').popover({
'container': 'body'
});
$('#btn2').popover({
'container': '.col-sm-12'
});
Potential Fix: you could add the following code. Currently only handles bottom aligned popovers but you can add options for other alignments.
$(window).resize(function () {
$('.popover.in').each(function () {
var el = $('[aria-describedby="' + this.id + '"]');
if ($(this).hasClass('bottom')){
$(this).css('top',el.offset().top + el.outerHeight(true));
}
});
});
http://jsfiddle.net/yvkhbw4b/2/
ALL!
I have dojo tooltip which is connected to an element.
It is created when/after page is loaded/ready. BUT, the problem is that content is loaded dynamically, when connected element is hovered the first time.
Content is loaded via AJAX. And - as far as the size of HTML content is unknown (widget is created, but content is still empty) - after hovering and content loading - Tooltip is appeared, but ARROW does not point to a connected element, but shifted down.
How to reposition a widget arrow after content is loaded dynamically?
Thanx a lot in advance!
UPDATE
After some investigations i have found, that position of tooltip Arrow is adjusted by
.tundra .dijitTooltipRight .dijitTooltipConnector class height (14px by default)
So i made quick and dirty fix for now:
function fixArrowForTooltip() {
// FIX ARROW (TODO HACK)
$(".tundra .dijitTooltipRight .dijitTooltipConnector").css("height",
"14px"); // restore to default for multiple tooltips in the page
var newHeight = $("#dijit__MasterTooltip_0").height() - 14;
$(".tundra .dijitTooltipRight .dijitTooltipConnector").css("height",
newHeight + "px");
// end of FIX
};
And placed this into onShow()...
I know, this should be re-worked, but.. WORKS PERFECT :)))
For any number of tooltips in the page arrows point DIRECTLY to connected elements :)
I need to show a virtual keyboard when the user selects an input text field in a webpage. This code runs on an set top box.
I am extending the QWebView, which is creating a new keyboard widget as a child.
WebView::WebView(QWidget* parent = 0): QWebView(parent)
{
WebPage *page = new WebPage(this);
this->m_keyboard = new widgetKeyBoard(this, Qt::Window|Qt::CustomizeWindowHint);
this->m_keyboard->createKeyboard();
this->m_keyboard->hide();
connect(this, SIGNAL(launchVirtualKB(WebView *) ), SLOT(launchKeyboard(WebView *)));
}
The widgetKeyBoard is made up of QGridLayout with many children QKeyPushButton.
When I do a show of keyboard, I see the whole keyboard drawn briefly and then overwritten 30% of the keyboard from the below web page (overwritten near the input field). I tried to have my own repaint for webview and mainwindow, but still see that someone else is overwriting.
What could be causing such an issue. I am using QT4.8.
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
What i have is a single dijit.Menu that contains the dijit.MenuItem objects with labels 1 - 9. It is connected to a sudoku like grid of 81 'nodes' (because there are so many, i dont bother with individual id's, i simply collect them with dojo.query('their-css-class-name')). This is the code i'm using inside of a widget to instantiate the context menu and its menu items.
var contextMenu = new dijit.Menu({targetNodeIds:dojo.query(".sudokuNode"), leftClickToOpen:true});
for(var i = 1; i <= 9; i++) {
contextMenu.addChild(new dijit.MenuItem({
label:i,
onClick: function(evt) {
//??
}
}));
};
contextMenu.startup();
What i'm trying to do is have the node that is clicked, and subsequently opens a popup/context menu, be filled with the value (1-9) selected from the context menu's MenuItems.
My problem is that i dont know how to "know" which of the 81 nodes was the one to fire the oncontextmenu event, and i dont know how to reference that node inside the 'onClick' method declared in the menu item.
Any help demonstrating how to reference the calling node in that context would be appreciated! If this isn't enough information, let me know what else i can do to explain my problem!
evt.target should get you the node that was actually clicked. Depending on the structure, you may need to do some other navigation from there, or use dijit.getEnclosingWidget().
If the MenuItems allow the events to bubble (I'm not sure; haven't used it myself), you could connect to the onClick() method of the Menu, so you've only got the single event listener in play.