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.
Related
Table.vue contains Row.vue and Form.vue inside.
Wanted behavior:
Row of the table will say the component comes from Row.vue
I was right-clicking the Row and went on "View page source", "inspect" and explored, but I couldn't find the answer.
Any solutions?
Also it would be awesome if there's a tool that helps with what I explained above with visual like this: instead of margin, border and such. It would be like Table.vue, Row.vue, etc...
I'm sorry it's not clear to me what you're trying to achieve, but there is a browser-based tool that might help you with debugging. It is compatible with both v2 and v3 and can be installed on firefox or chromium-based browsers
https://devtools.vuejs.org/
use this icon to target the component
When I active AdmPanel and trying to use the edit functions like >Display edit icons< and/or >Display edit panels< the layout messes up. The Edit Icons are huge shown all over the entire page.
Back in the days there was bug that the CSS wasn't included, but that's not the case. adminpanel.css is present. But beside it looks like all the elements doesn't have any css definition at all.
I couldn't find anyone experiencing the same issue and also tried other installation, but it's everywhere the same. Does anyone have an idea what am I missing here?
I had a problem with the Masonry plugin causing to only function when the viewport is being changed, meaning the masonry boxes were invisible until you would resize the browser window. After that the boxes are not olny visible but also Masonry works as expected.
I resolved this problem by using regular CSS again for styling, and not LESS CSS anymore as I had intended.
But what would I be able to do to use both? (It doesn't seem like it's a simple 'reorder how the scripts are being loaded' kind of thing)
Funnily when I use jsFiddle and implement LESS CSS there, there is no problem. Maybe somebody can tell me what jsFiddle does to fix the issue?
https://jsfiddle.net/rcygo5fy/
code
"Solution": Since a solution would be a hassle with the code and compiling the CSS on every load is very heavy, especially client-side, the best solution is to leave LESS completely out of the end result and only use it for development but a LESS-to-CSS-rendered file for actual usage. With CSS the Masonry timing problem goes away.
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)
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