Surface Librarybar with scrollbars - scrollbar

We have a library bar filled with items, which can be dragged from and dropped onto it. Now the client wishes to see something like a scrollbar or arrows on the side, to have an indication if items are outside of the visible port.
As you can see in the librarybar template below, it contains a surface scrollviewer. Yet I don't seem to be able to reveal these scrollbars.
Any suggestions on how to resolve this issue?
The librarybar template:
http://pastebin.com/QVnvqbNm

Managed to solve it. Answer was easier then expected. Found out that the scrollbars were cleanly removed, but all properties regarding it were still present. Kind of misleading.
Easiest way to solve:
Open expression blend.
Insert SurfaceScrollViewer
Open Template from the SurfaceScrollViewer
Copy SurfaceScrollbars & necessary templates to the templates/resources
from your library bar
Adjust the templates to meet your requirements

Related

Web Accessibility (WAG2) MODIFICATIONS

I need to have my prestahop (1.7.8) pass web accessibility check and i went through resolving most errors except of 2 which i consider also stupid ones..
The control arrows of default theme's image slider has no contrast. (The control arrows are white and the wave Accessibility app is comparing them with the blank slider box no matter the image added in the slider)
In the product page the quantity add remove quantity arrows give the following error "A button is empty or has no value text." So far i have only succeeded n removing the quantity arrows completely by removing the code from the theme.js file.
Has anyone any idea how i can properly correct these errors without ruining the theme?
Sounds like you are using a scanner to check the accessibility of your code. In particular, the Wave tool from WebAIM. Note that scanning tools can only catch a small percentage of accessibility issues. The number ranges from 20-30%, leaving 70-80% of accessibility issues untested. You need to perform manual accessibility testing to find the remaining issues.
Also note that scanning tools aren't flawless. They can report false positives. So it's possible that your two remaining errors are not real errors. Applying CSS and background images when testing for color contrast can be quite tricky and some scanning tools will report an error when there isn't one, or might NOT report an error when there IS one.
With those two caveats in mind, we'll need more details about your code before we can give detailed advice.
With your second error, it's sounds like you might have a '+' and '-' button for quantity. If those buttons are images and the image doesn't have an alt attribute, or if they're CSS :before elements that don't have a pronounceable character, then WAVE will tell you the button doesn't have any text.
i still can't figure out how to resolve the quantity arrows (up/down)..
I did edit the theme.js file to remove the arrows but now the language change is not working... so i ended up reuploading the original theme.js which now shows the same initial web accessibility error.
Do you have any suggestion as to what to edit/where?

Is it possible to replicate the effects of disabling CSSOM View Scroll Coordinates flag in chrome using css code?

I want to know what disabling CSSOM View Scroll Coordinates flag in chrome://flags does and how can i replicate this behavior using code in my ReactJS app.
Additional information :
It seems after Chrome 85 update, ag-grid RTL support breaks and the grid is not able to scroll the content and sometimes the cells becomes white, i had to dig very deep into the past questions and try a lot of far fetched solutions to find what i have.
I found out that disabling CSSOM View Scroll Coordinates in chrome://flags will fix the bug!~ but the problem is i don't want to force my users and teach them to do this just so my app works, so i thought what ever disabling CSSOM View Scroll Coordinates does, maybe i can replicate it using css code or some other code
I have already reported this issue in ag-grid's git-hub but i'm still waiting for them to offer a solution in the mean time if i can get this to work only using code, it would be great as i have a lot of users which are not able to use my app just because of this simple bug ..
Thank you.

How can I stop aptana Outline view automatically collapsing?

I'm using aptana to work on a web document with a fair bit of javascript that's organised into functions. I want to be able to easily jump around the functions, so I selected aptana for the document explorer / outline view panel. It works fine, but when I'm typing the document it collapses all by itself, which drives me bananas.
How can I stop it doing this?
Thanks.
Under the little arrow in the top right corner is an option to "Link with Editor". Turn this off and the Outline view should stay as you leave it rather than trying to match what you are doing in the editor.
I tried doing what Sarah suggested and I was unable to get the Outline View to NOT collapse when editing a .js file.
I looked through the documentation and tried different settings within the Outline tab without success. Expand All did expand all of the functions, objects, and variables, but when I edited one of the objects or functions, that one would then collapse in the Outline View. The problem is it would never expand itself even when I moved in to another section of the document.
I would think that after editing a section of the document, the Outline View should update to reflects the change without collapsing. If it does collapse, then it should expand once saved.
It either collapses and expands by itself (link with editor is "on") or only collapses by itself when you change anything in the document (link with editor is "off"). I don't think this behaviour is what most of us, users, would expect. I hope they change it soon. It's one of the very flaws this otherwise great piece of software has.

Bootstrap CSS How To: Create a ContentBox with a Title Bar

I would like to know how to make a "ContentBox" with a title bar similar to this login box:
https://github.com/login?return_to=%2Fjshint%2Fjshint%2Farchives%2Fmaster
Is there a simple way using bootstrap css or do I just need to come up with my own way?
The page you linked does not show the login for anyone who is already logged into GitHub, so you may want to be a little more specific next time or post a screenshot.
That being said, I assume you just want the blue gradient header over a box of some kind. It's very simple to do, but there are no components of that nature built in to Bootstrap.
If you want to see what GitHub (or any other site) has done to create the effect you're looking, many tools are available to inspect the source. Here is a screenshot of Chrome's built in debugger (F12).
Edit: That image is being zoomed out a bit too much, here's a closer look.

VS HTML Designer Tag Hierarchy Links. Broken in all versions including 2010-or is it me?

Should this bar on the HTML designer show the tag name? It sometimes does!
Here's an image of what I referring to.
I thought for sure it must be a bug but considering that I heard that MS was rewriting the editor (designer too?) I am starting to question whether I know how to use it!
Note the "TD" tooltip on the bottom right. Shouldn't this "TD" appear on the bar on the far right where the mouse would be?
This looks like a bug. If there's a reliable repro for it (i.e. if you can show to do it from a new or sample form), you should file the bug on http://connect.microsoft.com/VisualStudio. (Or you could file it anyways, but without a repro, it's hard to find and fix...)

Resources