I'm using Angular 8 with the Angular Material components, and am running into an issue with the focus indicator in a dialog.
When there is a radio group as the first control inside a dialog, as you tab around the dialog, the first option on the group gets selected - even if there is another option selected. i.e. when tabbing forward through the form, if the 2nd option is selected, the focus goes to the first option, then the selected option, then the buttons.
I've created a stackblitz here: https://stackblitz.com/edit/angular-2nkqr3 which shows the issue.
Does anyone have any ideas on how to stop/work around it always putting focus on the first option? (other than put something else first - unfortunately its the only thing in the dialog).
Thanks in advance for any advice,
Matt
Its simple set autoFocus:false when you call dialog like
openDialog()() {
const dialogRef = this.dialog.open(PopupComponent, {
panelClass: 'modal-medium',
data: { dialogueName: "Name" },
autoFocus: false, //disable auto focus in dialog
});
}
Just to loop back round on this. Turned out it was an issue in Angular material at the time: https://github.com/angular/components/issues/17876
Should be fixed now.
I'm getting started with Windows 8 App development using WinJS. I'm using the Light UI theme but I have set up a darker area on the left of the page (where the black back button is) and the issue is: you can't see the button.
I've trawled through the MSDN pages and the most I could find is how to style a button which doesn't actually explain how to change the colour of an actual asset.
http://msdn.microsoft.com/en-us/library/windows/apps/jj835822.aspx
I've also tried adding: win-ui-light and win-ui-dark classes to the button with no success.
I wondered if someone could point me in the right direction?
Many thanks for your time
Chris
First of all you have to delete the link tag that contain UI css by default and add it to document head , Dynamically.see below code :
var uistyle;
// call when your app load or resume.
function onappopen(){
uistyle = document.createElement('link');
uistyle.href = "//Microsoft.WinJS.2.0/css/ui-dark.css";
uistyle.rel = "stylesheet";
uistyle.id = "UIstyle";
document.head.appendChild(uistyle);}
// call when you want to change UI Style.
function UIstyle(UIbool){
if(UIbool=='light'){ uistyle.href = "//Microsoft.WinJS.2.0/css/ui-light.css";}
else {uistyle.href = "//Microsoft.WinJS.2.0/css/ui-dark.css";}}
Like: UIstyle('light'); for light UI in Windows 8 or "UIstyle()" for dark;
I used the DOM Explorer to find the buttons default values and overwrite them. It was the child element that needed to be overwritten: .win-back
I code this page, a tab with sliding capability : here
I really like the effect, but when you vien a long tab (let say specification), and we go to a smalll one (download) reclicking on a large one force the user to scroll down again...
Is it possible to jquery something that tell the page to stay scroll down at the max after the tab pressed ?
I'm doing something like this with the jQuery UI tabs, you can modify it for whatever layout:
//Tab panel height matching
$(".ui-tabs-panel").each(function() {
if ($(this).height() + 30 > $(this).parents(".subTabsC").height()) {
$(this).parents(".subTabsC").height($(this).height() + 30);
}
});
I have the whole tab content wrapped in a <div class="subTabsC">. The 30 pixels in my case is to account for the tabs and the border, adjust to whatever you need.
Yes. OnLoad you could iterate through all the tabs, find the tallest and set the container's height to that value and remove whatever's doing the smooth resizing.
It means some of the smaller things might look a little lost, but you'd not be resizing the page (which annoys me too).
couldn't you just add "return false" at the end of your function? this would prevent it from "refreshing" the page when you click the anchor link....I could be wrong...I'm just starting to learn jquery and javascript.
I'm working on a Firefox extension, and I have created a multiline text box. When the user presses a button, I add text to the textbox by using (Javascript) TextBoxElement.value += "More Text";
The problem with this code, is that whenever more text is added, the textbox scrolls all the way to the top. With much testing, I haven't figured out how to make it scroll all the way to the bottom again. For some reason the scrollTop property is always 0, and setting it doesn't effect the scroll bar.
Is there any ways I can set the scroll bar back to the bottom of the text box?
My extension's purpose is to embed a small chat box. I'm using a textbox to store the chat history. Maybe using a textbox isn't the most efficient way, so any other suggestions would be great as well.
Someone on Chatzilla helped me out on this one. Thank You!
Anyway, here is the solution:
var TextBoxElement = <TextBoxElement>;
var ti = document.getAnonymousNodes(TextBoxElement)[0].childNodes[0];
ti.scrollTop=ti.scrollHeight;
The another solution is to move caret to the end of textbox content. Caret is controlled with selectionStart and selectionEnd properties (which can be set or get).
Here is the sample code:
var TextBoxElement = document.getElementById("myTextboxId");
var pos = TextBoxElement.value.length;
TextBoxElement.selectionStart = pos;
TextBoxElement.selectionEnd = pos;
Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?
Basically I am looking for something that would either:
Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.
Thanks.
HTML Tooltip (Firebug)
Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.
HTML Tooltip (Firefox developer tools)
Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element
This feature can also be accessed from the popup menu in the HTML view.
If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:
JQuery Tooltip
Open the console and enter jQuery('.css-class').trigger('mouseover')
Regular Javascript Tooltip
Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.
You can also start the debugger on a timer. Enter this command into the console:
setTimeout(function(){ debugger; }, 10000);
This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.
I think you can also do this :
Choose Firebugs Inspect mode
Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.
Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console
Worked for me anyway!
For Jquery UI tooltip I finally set up a long delay for the hiding of the element so I have time to inspect it before it's deleted. For example, I used this to inspect the tooltip:
$( document ).tooltip({ hide: {duration: 100000 } });
instead of:
$( document ).tooltip();
You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.
Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).
Go here for a list of all Firebug keyboard shortcuts.
For the bootstrap tooltip:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.
A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.
For Javascript events such as Mouse over.
Open Firebug/Inspect an element.
Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
Put your mouse over the element and don't move it from this point forward.
Use your ↑/↓ arrow keys to manoeuvre in Firebug.
Use your ←/→ arrow keys to expand/contract code with + or -.
Double tap Tab to get to the CSS pane.
Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
Hold Shift and double tap Tab to get back to the HTML pane.
I'd like to chip in with my preferred method. Putting this little snippet in your console allows you to start the debugger at any time with a simple keypress on your keyboard (F8 is used in this example)
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
You can also use a keycode if you prefer:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.
Open console:
If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.
$('your selector')
Write above javascript and Press enter. you will have list of elements.
Now e.g. If library added event on mouseenter enter following script:
$('your selector').mouseenter()
Press enter.
This way you can simulate mouse movement events without actual mouse. and can use actual mouse pointer to investigate thing in debugger tool.
This is an extremely old question by now, but I've found an answer that directly answers the "freeze the browser" portion of the question.
Control + Alt + B. This is "break on mutate". Which means, when you are hovering over an element with firebug engaged (Control + Shift + C), that when the HTML attributes would change, instead they hit a breakpoint, allowing you to easily navigate around to examine for paths, etc.