Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
Related
I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.
I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
First, im not really experienced with javascript or jquery, usually the plugins or very very simple code by hand (as you are about to see).
Wat i want is done many times, but for some reason i cannot get it to work like i would.
I have several problems.
I use the .animation to slide 2 divs in and out (2 divs next to each other, and i want them to slide in and out of the screen (like the iphone homescreen for example).
Now the problem is the animation does not work as intended, instead of sliding away div1 WHILE sliding in div2 along side of div1, div1 disapears/shrinks (sliding up and left) instead of "sliding outside of the screen" and then div2 shows up afterwards. (so the slide effect is not working and the divs hide and show seperatly instead of sliding like a iphone screen).
Now the thing is i have recreated the setup and tried on there, and it works as intended as shown here: http://jsfiddle.net/dkeulen/2fHbz/
So that is how i want it to work, but it does not do so as show here: (NOTE: its work in progress) http://jsfiddle.net/dkeulen/gQ9aE/2/
(Black square on the right center is the button you need to click).
I could post all the html and css and jquery here but its quite the amount to post...
If anything els is needed i can provide it ofcourse.
As code this is the part i use for the sliding:
$('.btnr').click(function(){
$('#hosting').animate({'width' : '0px'}, 100).hide(600);
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
$('.btnl').click(function(){
$('#hosting').animate({'width' : '100%'}, 600).show(400);
$('#inexchange').animate({'width' : '0px'}, 600).hide(600);
$('.btnl').fadeOut(600);
$('.btnr').fadeIn(600);
});
I hope anyone can help me out on what goes wrong and what i must do about it, thanks in advance!.
it's better to specify a jsfiddle for us to see it in action
I think your problem is that the hide() and show() doesn't stack in the same animation queue
so one way of solving this is using promise ex.
$('.btnr').click(function(){
promise1 = $('#hosting').animate({'width' : '0px'}, 100).promise();
$.when(promise1).then(
function(){
$('#hosting').hide();
$('#inexchange').animate({'width' : '100%'}, 600).show(600);
$('.btnl').fadeIn(600);
$('.btnr').fadeOut(600);
});
});
the same goes for the other button.
check this simple fiddle I made to demonstrate how it's working
http://jsfiddle.net/artmees/BCTxH/
I recently by accident found an issue I have with a web application I have made entirely with dojo.
I have a TabContainer and a toolbar with buttons and each button adds a Tab in the TabContainer.
Each of these new Tabs has as children, created programmatically, one or more of the following BorderContainers, ContePanes, Editors, FilteringSelects, Uploader and Buttons. I should point out that I do not have parseonLoad: true byt false and I call manually the parsers.parse when required. I should point out that in the ContentPanes in the content attribute I put also declarative filteringSelects and ValidationTexts and Uploader I hope that is not a problem.
Everything is working great in all browsers even in IE9 besides one thing in Firefox 12.
When I create many new tabs and the ScrollingTabController gets created (The left/right and dropdown arrows of the tabstrip) when I use the ScrollingTabControllerMenuButton (the down arrow at the far right) the TabContainer behaves wrongly and eventually freezes. Firebug shows weird errors when I select different tabs via this menu of the tab strip. Errors of the buttons that I have in these tabs, weird errors mentioning StackController or ScrollingTabController
[ e.g.
button is undefined
if(this._selectedTab === button.domNode){ StackController.js (line 222) ]
different each time...
This weird behavior only happens in Firefox. IE9 and Chrome do not have any issue at all!
Could anyone have an idea on what might be the problem? Is it a known bug? Is it a problem that I have many widgets in each Tab ?
It seems that it is indeed a browser specific bug and as I was told it should be fixed in the following releases
I first reported it to the dojo community and from there they reported it to the Firefox team
http://bugs.dojotoolkit.org/ticket/15496
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});