In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
Related
I am puzzled by the styling of TButtons that have Default:=True. The issue is that at least with some styles (Luna, for example), the most recently focused button is highlighted orange, which is the same styling used for a default button. As a result, I am concerned that users might be confused as to which button is the default or will at least think it odd that two buttons are highlighted. This behavior can be seen in XE7 (and according to a comment, also in XE8).
Questions:
Is this considered a modern way (relatively to unstyled VCL) to present default buttons?
If this is not considered standard behavior I can work around it in my own dialogs by strategically enabling/disabling the default button, but I was wondering whether I missed some setting that controls the relation between default buttons and the most-recently focused button. Is there a setting that controls this?
I suspect that this is a VCL styles bug. Create a default VCL application that uses the standard OS theme. Then add two buttons and an edit control. Make one of the buttons be the default button.
Now use the tab key to cycle round the focus. When the edit control has the focus, the default button is highlighted. That indicates that if you press ENTER then that button will be pressed.
However, if either of the buttons has the focus, then the button with the focus is highlighted. That's because if you press ENTER when a button has the focus, the focused button is pressed, irrespective of whether it is the default button.
The rules are as follows:
If a button has the focus, it is highlighted as the default button.
If a control other than a button has the focus, the default button, if there is one, is highlighted.
So, here's what the application looks like in XE7 with the system theme. The non-default button has the focus.
Note that only one button is highlighted, and it is not the default button.
And here is the same application in XE7 with the Luna style.
Here we have the default button, and the button with the focus, both being highlighted. I would regard that to be a bug, and it should be reported.
The datepicker is managed by knockout-jqueryui in a Durandal view presented as a modal dialog. The calendar pops up when the corresponding INPUT is focussed, and hides when it is blurred. Data-binding works fine.
But when the user selects a value, the calendar closes, the INPUT updates and the calendar re-displays. It works, but it's annoying my users because they are mouse obsessed and the calendar obscures the control below, making it hard to click on it. Yes, I know they could press tab. I have pointed this out.
How can I stop the re-display? Ideally, triggers for display would be focus and keydown. I have no problem with configuring it to manual control and switching with data-bind="change: showCalendar, ..." or similar, if that's how one does this.
So, what's the usual way to go about this? If it's manual control as I describe above, what are some keywords to expedite finding the relevant section(s) in the documentation? (How to set it to manual and how to hide/show it manually.)
(I found show() and hide())
The showOn option for jQuery UI Datepicker is passed through by knockout-jqueryui.
It defines only two values, 'focus' and 'button'.
There is no explicitly defined mechanism to disable auto-display, but I found that a value other than the defined values has the desired effect. I am passing 'click'.
Manual control methods are show and hide.
I'm using a dialog box and a date picker but for some reason there is no close button showing the top right corner and you cannot see the arrow buttons in the date picker. The buttons are there because the border shows when you hover over them but you cannot see them at any other time. Does anyone know why this is?
Border shows means you have loaded the css correctly. But buttons are missing because the button strip image is missing.
Check your css that the image strip path is given correctly. It has to relative to the css file.
You can debug more using Firebug in Firefox, or Inspect Element in chrome.
I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.
On occasion I need to click a sIFR link in order to "activate" it. I hover over it and nothing happens. I click it, then hover over it and then it works correctly. This seems to mostly happen with items that are not within the viewport when the page renders (items you have to scroll to see). Is there a fix for this?
This tends to be a problem in Firefox when you have a Flash movie with wmode set to transparent or opaque, contained in a floated element. Removing the wmode should resolve the issue.