i guess maybe using javascript im gonna do it.... but if anybody knows a better and faster way to do it .. easily im gonna appreciate any ideas...
thanks!...
this is to make impossible for a user to view badly the page increasing the text or doing something like a zoom in the browsers ...
ive got some QA engineers asking me that .....
thanks!
This is a very bad idea from a usability/accessibility point of view. Please don't do it.
Even if you block that key combination, the user would still be able to increase the zoom level via the "View" menu.
You haven't given a good reason, I doubt there is one, so I agree that you shouldn't do it. It's a fun little challenge though, so I have a possible answer, though I don't really know if it would work.
First, have a font-size: 70% or whatever percent you want in an outermost containing element.
Then, create a dummy testing element with:
display:block;
position:absolute;
visibility:hidden;
font-size:1em;
font-family:Arial;
Find the actual height of the element (say, 25px) and then test it over and over again on a timer (window.setInterval()). If it doesn't match, change the font-size percentage on the outer element until it does.
Related
There is this button that when I try to click on, he kinda moves a little and opens a sub-menu. The solution is easy, just click on the div a few levels above him (still the button). But he is always changing class names.
I mannage to do it using this aberation //div[#style]/span[#aria-label]/../../../../../...
I also tried to use //div[#style]/span[#aria-label]/parent::div[#role="option"], but it did not work, and I don't know why.
Does anyone have any suggestions to make it more decent? I am sure that the "../" was not mean to be used on so many levels...
Also, I was trying to use CSS selectors for my entire project, but after spending some hours looking at StackOverflow answers, the solution seems to be use XPATH. If there is a way to do this operation with CSS Selectors, I would be very interested.
You can shorten and make your XPath expression more readable with :
//div[#style]/span[#aria-label]/ancestor::*[5]
where ancestor::*[5] replaces /../../../../../...
I am using Template10 with the Hamburger starting project template. I'd like to have a margin between the hamburger area on the left and all content. I tried changing the shared Shell.xaml page (by adding a margin, etc.) but couldn't figure out the best way to sort it out. Conceptually, that makes sense, but it's the specific detail of how to make it work that I'm missing.
Is there an easy way to do it without changing each content page?
Regarding the questions in the comments: I want it in the closed case of a wide view; the question doesn't make any sense in any other case. As far as what I tried, it doesn't really ultimately matter, since none of what I tried worked - I'm asking what the right way is to do it, which I never figured out.
Here's what the default looks like, without a margin:
Here's what it looks like with a margin added to the content area, which is also how the sample template contents handle this:
I don't want to have to mark up every content page with left margins to get the offset in the second picture.
1: https://i.stack.imgur.com/jUIuO.png
Okay, now I have enough information. You have a few options here. The first is just bite the bullet like the rest of the developer community and format your pages like normal. But if you simply must, you can create an implicit Page style with a setter setting Margin="16,16,16,16" but, listen, and I am not kidding, you will ultimately regret it unless your app is super-simple. The biggest problem will be the spacing will be OUTSIDE the containing ScrollViewer.
Thanks for using Template 10.
I would like to know what these options people are using more.
1) Using v-on on normal (div, span, etc) element
<div v-on:click="myFunction" class="cursor-pointer">Click me<div>
Here, it requires to have the a class to set up the pointer cursor to indicate that is can be clicked, and also, to increase the UX.
1) Using v-on on link element
Click me
Here, doesn't need to have any classe to set up the pointer cursor. However, it requires the prevent mode to stop the link action.
So, What is the best practice, advantages and drawbacks of these two approaches?
Ultimately, it doesn't really matter. Generally speaking though, you should be writing your HTML dom in Vue.js the same way you would write it without Vue.js. If something should be a link because it's leading to another view in your application, then <a> makes sense. If you wouldn't normally use an anchor link if it was just a static HTML page, then you're probably better to be writing it with a div, span, or whatever your developer instincts decide in that case.
Always try to write your code as if someone else is going to be looking at it, in which case they are going to have some expectation of what an <a> is supposed to be doing.
Question:
Given a DOJO TreeGrid, how can I capture the event when a user clicks the expando ("+") button to expand a row, and store the specific row number or associated item's identifier? I'd like to do this for the express purpose of completely deleting the TreeGrid from the DOM, rebuilding it, and restoring it's state once rebuilt (i.e. programmatically expanding the rows that the user has previously expanded).
Background:
So I've got a custom DOJO TreeGrid, hooked up to a custom QueryReadStore, in my app. It was constructed using the following tutorial:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html?ca=drs-
Pretty interesting tutorial, but it might be irrelevant to my question because it doesn't really squash any functionality, it only seems to augment it.
Anyway, googling around for a moment, I found a nice function in the DOJO forums that I can use to programmatically expand a row, given the specific row index. Works perfectly.
The problem is that I haven't been able to find a good way to capture the expando click event, and relate it to a specific "parent item row" index in the grid.
Details aside, I'd like to get the row index of every row that the user has expanded, into an array (and delete the index of a row that the user collapses, obviously), so I can destroy this TreeGrid, and faithfully rebuild it, with the user's selections expanded properly.
I'm not really a novice to DOJO, but I'm certainly no expert by any means. I've done a fair bit of googling, and FireBugging, and haven't really been able to find anything that I can use to do this.
Suggestions? Anybody done something similar before? Stupid question with obvious answer that I've missed? I'm totally misguided and am going about it all wrong? Thanks everybody!
Something similar to this would probably work, this is how the dijit.Tree implementation wouldve looked;
var expandedNodes = {}
dijit.tree._onExpandoClick = function (args /* object wrap for args.node */) {
var treeNode = args.node,
path = treeNode.getTreePath(),
id = treeNode.getIdentity();
expandedNodes[id] = path;
}
I am not 100% sure im being strictly correct but for the TreeGrid you will have to look through code of dojox/grid/_TreeView.js (link). The _setOpen would be an entrypoint from which you can 'hook' the onclick action. from there, find the expandoCell.openStates hash, this is a true/false variable set, indexed by itemId. This hash is most likely what you need as your state
I'd like to style a select-box with some gradients.
My problem is that somehow there is a shadow added.
You'll see what I mean by opening this fiddle.
The gradient of both classes is the same ...
I do not know why a shadow is added to the select-box and I just can't find a solution.
Can you help me?
Thank you.
The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.
I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.
I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:
select:focus {
outline: 0 none transparent;
}
Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.