Why does clicking an empty href "shrink" my outlook web add in? - outlook

This is part question, part bug report. To reproduce I created a new project "Outlook Web Add In (C#)" in Visual Studio 2017.
Then it generates a default project. In the default project I change:
<p class="ms-font-xl ms-fontColor-themeDarkAlt ms-fontWeight-semilight">All properties</p>
to:
<p class="ms-font-xl ms-fontColor-themeDarkAlt ms-fontWeight-semilight">All properties</p>
Now it gets interesting, prior to clicking the newly created link everything looks as expected:
Prior to clicking
But then when I click the link all of the text in that HTML pane will shrink, more so with each subsequent click:
After clicking several times
No other modifications to the default project were made other than the around any given header tag. It will continue to shrink the more a user clicks.
Although it doesn't solve my question I have also worked around the bug by changing the href statement to the following:
<a href="#" onclick="myfunction(); return false;">
My hypothesis is returning false is unexpected by whatever function is causing the content to reduce in size. Is this an expected behavior?

Thanks for reporting, it seems like a bug.
The team is investigating now.
Please track here for update: https://github.com/OfficeDev/office-js/issues/40
Disclosure: I am working for Microsoft.

Related

Dynamics CRM: Model Driven App: When showing Custom Page as pop up Dialog, formatting error occurs

I am working with Microsoft Dynamics CRM and have a question.
I want to show a custom page as a pop up dialog in an entity form. So far, I am able to show it, but the formatting is broken. It looks like everything is on top of each other:
While checking, I saw that every element in the edit form (contained in the custom page) have its CSS position set to Absolute. This seems to be the problem here. The next picture confirms it. I changed the Top value of one of the element and got the following result:
Now, after having had a look into it, my question is the following:
Could you tell me, how exactly do I have to configure the editing form in the custom page to get the correct result (in the page designer)? I am also open for a JavaScript - solution. But I am not sure how to run it in this type of context.
Designer:Left side
Designer:right side 1
Designer: right side 2
I did not solve it. It was solved with the last Microsoft CRM update. (The one which hides the Advanced Find - Icon on certain parts of the system). I cannot say what exactly got changed. What I know is that I have not changed anything on my solution at all.

Personal Tab Renders Fine, then a few seconds later shows "There was a problem reaching this app"

I'm testing something in a personal tab (something related to SSO, if that's important in context), and the tab renders fine for about 30 seconds or so, then suddenly gets replaced with an error "There was a problem reaching this app" (the one with the image of a woman and a thought bubble). Does anyone know why this suddenly happens AFTER the tab has ALREADY rendered ok?
I finally found an answer to this, so posting in case someone else has the issue. Basically, Teams manifest recently added a capability to show a loading / progress indicator to show users that your tab is still loading. It shows up in the manifest as "showLoadingIndicator" and is boolean (true/false). It can also be set in App Studio of course, as the image below shows.
The problem comes in that the "SDK" link shown in App Studio is flat-out useless - it links to the Teams js Library on GitHub, of all places! It should rather go to this section of this page, which explains how to deal with it. I was originally only calling microsoftTeams.appInitialization.notifyAppLoaded();, but I needed to also call microsoftTeams.appInitialization.notifySuccess().

How to go about debugging Durandal

I had a trivial Durandal app working, paused to prototype a capability in an html page related only by the fact that it resides in the same folder, and then returned to the Durandal app only to find that while the shell is constructing the menu, views don't seem to load or at least render. The # url changes but that's it.
I've previously seen this when I had broken JS in a view or in shell.js, but I've tried stripping the routing table down to the home view which is basically static html with an empty view, and it's still happening.
The question is not so much "why are my app views showing blank" as "how does one go about troubleshooting this". There's no barfing, just a white silence. I'm not fond of guessing games and I can't believe a framework so well thought out lacks a strategy for troubleshooting.
Yes, I've seen the http://durandaljs.com/documentation/Debugging.html page. Debugging is switched on in my main.js but I don't know how to proceed from here.
So, where does one normally start when this happens? Some logging seems in order but I have no idea where to put it.
I marked the applicationHost div like so
<div id="applicationHost">
<div style="margin: 100px;">Hello, I haven't been replaced yet.</div>
</div>
and it vanishes right after shell calls router.activate()
OK, I found the specific problem, it was a bad binding in shell.html - the name of a binding target changed and the binding needs to be updated.
But the question of how to find this stuff remains. My app is trivially simple. "Inspect everything and hope you notice any problems" is not going to work on a complex app.
In the absence of any advice I'm starting to think that the only available strategy is to make only incremental changes with constant regression testing.

IE8 Developer Tools not displaying Style info

I'm running into an issue with IE8 developer tools where they Style information is not displaying in the pane when I select an element. It is definitely page specific as I can switch to another page and the styles will appear for that page when I select an element.
Strangely, if I add an inline style to an element, the inline element will display in the style pane. The page finds the CSS files just fine since the page is rendering with the styles.
Anyone else encounter such a problem? If it helps, the page I'm developing is a Joomla template. I'm currently doing the process-of-elimination by deleting half the code, then the other half to identify the culprit code but I'd thought I'd throw this out to see if anyone else knows. Thanks everyone.
I saw others mention similar problems in other forums and the common issue has to do with a link tag to an external stylesheet. In my case, it was a Google Fonts Directory link.
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />
Removing the link temporarily allowed to style information to display.
I had a similar issue when a stylesheet had an include statement for another stylesheet that did not exist.
Try refreshing the Developer Tools' DOM cache - 4th button in the toolbar, the hotkey's F5. If the element's styles change after the Dev Tools window is opened, the actual DOM and the reported one can differ.
I ran into the same issue and found that developer tools was freaking out on my Typekit JS in the head. There was nothing wrong with it. Developer tools was just being finicky. Imagine that. I commented it out and viola, it worked again.
Another buddy of mine said he had seen developer tools freak out when an HTML tag wasn't closed properly so that might be another thing to look for.

Expanded/collapsed state not saved after closing file

In Visual Studio, you can expand and collapse code without using regions, for example in a code-behind page you can collapse methods, etc... And in an ASPX page you can collapse tags, tags, etc...
It's useful when you have a long page and you want to focus your development on a specific part. What's cool about it too is that you can close the file and reopen it and the state of the expanded/collapsed blocks is saved exactly as you left it.
Except in one instance. That state is not saved for tags in ASPX pages, where it would be most useful.
I know there are some good plugins out there for VS but I couldn't find one that addresses this issue.
Has anybody got a solution?
Before you mention custom controls, they are not always convenient or feasible when trying to keep a page short and I don't consider this a solution to this problem.
Looks like this issue will stay unresolved at this time.
I opened a bug report on Microsoft Connect, if this issue is important to you please vote it up!
https://connect.microsoft.com/VisualStudio/feedback/details/613221/expanded-collapsed-state-not-saved-after-closing-file

Resources