I have a list of elements and a sticky button, fixed at the bottom of the screen. So when the user scrolls down in the list the button stays at the bottom. This works perfectly fine but when I open up my keyboard, the button is pushed up as well, hiding the other elements which are on the top of the screen.
Can I place my button somehow that it remains sticky on the screen but when the keyboard is opened up it doesn't get pushed up?
My current (hacky) implementation is that I am hiding the button when the keyboard opens up but I don't like it very much.
you must be using any library for keyboard like react-native-keyboard-spacer or etc so you can disable that for that specific screen, another hacky implementation #mikasa
i assume you are wrapping your component with a KeyboardAvoidingView, that would explain your button getting pushed up, so you should consider passing false to "enabled" prop when your keyboard is open, this will cause the keyboard overlay your button. you can check out the docs here https://reactnative.dev/docs/keyboardavoidingview#enabled
Related
I am working on an Android Fragment that has a WebView component.
Inside this WebView, there is a content-editable div used as compose area.
During development, I noticed whenever the content inside <div> is short, when it got focused and soft keyboard is shown, the WebView will be scrolled up automatically.
If the content inside <div> is long, such scroll up won't happen at onFocus stage. Unless the saved cursor is covered by soft keyboard area. (That means for short content, even if cursor can be displayed after focus, the WebView will still scroll up somehow)
To me, it seems that WebView (auto) Scroll logic is:
If focused element height is less than the display area, scroll to the bottom line so the whole element can be fully displayed
If the focused element is too long/large to be displayed as a whole, do nothing.
If there is a cursor needs to be displayed, even 2, still scroll up until cursor is shown.
I googled a while but cannot confirm this logic system from official channel. However, I do see some discussion shared the same idea with me.
However, what I would like to know is, how to disable this kind of auto scroll up when content in a div is short...Any hints friends?
I have a pop-out navigation menu that appears on smaller screens when an 'open menu' button is clicked, tapped or keyed with enter or spacebar. (Javascript, CSS and HTML; no jQuery).
The navigation uses divs, rather than an unordered list, with a <nav> container but the problem outlined below happens whether the menu is in divs or an unordered list.
If a keyboard user is tabbing, opens the pop-out, continues tabbing, the user is cycled round the trapped area until either a navigation link is opened with the enter/spacebar keys or the pop-out is closed by using the enter/spacebar on the 'close button' or the Escape key is pressed (with thanks to Graham Ritchie for this code).
It works fine in general. See this Codepen that works.
BUT, if the last item in the menu is both a direct link and a parent with a sub-menu, then the trapping does not work and anyone tabbing in the pop-out menu finds themselves in the browser's address bar area outside the website itself or, in the case of this Codepen where it is not working correctly, the tabbing moves down to the 'Console, Assets, Comments...' area at the bottom of the browser.
Can anyone explain why this is happening and what I need to do to resolve it? Thank you.
I am using a slickgrid in angularjjs. I have set the "enableTextSelectionOnCells" and "enableCellNavigation" to true. Now when i navigate the grid using keyboard arrow keys, the scrolling is quite weird. To scroll using keyboard arrows, i first click a cell and then press down or up arrow, the current active cell gets changed upon pressing up or down key but it is not proper, meaning the next active when clicking down key is not the immediate next cell(downwards) - Just like this example https://mleibman.github.io/SlickGrid/examples/example-spreadsheet.html
I want to excel like keyboard navigation in slickgrid, how can i achieve that.
After a week, I found that I was using a chrome extension called "smooth scroll" which used to override the behavior of slickgrid scroll. I removed the extension and scroll is working fine using keyboard arrows.
WCAG has a great design pattern for implementing Tabs with Tabpanels here
It uses a "roving tab index", and keyboard arrow keys to cycle between tabs.
This works great, but I recently received a request to make a tab/tabpanel widget that only shows one tab at a time, and has "previous" and "next" arrow buttons to cycle through the tabs.
Visually, the arrow buttons are on either side of the active tab. But in terms of tab-order, the WCAG design pattern specifically states that the tabpanel associated with the active tab should follow it in tab order.
Would it violate any accessibility rules to add these new arrow nav buttons to the widget, as long as I assure that their tab order is before or after the tabs/tabpanels?
I figure the keyboard functionality could remain as it currently is (using arrow keys to cycle between tabs)
I'm a blind screen reader user.
I would maintain left/right arrow keys to navigate through the tabs as usual, and don't make your arrow buttons focusable at all.
My reasoning behind this is the following:
Your arrow buttons control scrolling and scrolling is pure visual stuff
Usually, as a screen reader user, we don't have keyboard access to buttons within scrollbars. It is completely transparent for us.
IF you take a multiline text area for example, the down arrow always goes to the next line, regardless of whether the cursor is currently at the bottom of the screen.
We don't have anything special to do, and especially we don't have to manually press the down arrow button of the scroll bar. The cursor goes to the next line, and the text content is automatically scrolled one line down if needed.
The same things happen for a tab control if there are too many tabs to fit on a single line.
In that case, in popular GUI desktop libraries, you can choose to show scroll arrow buttons, or make the tabs spand multiple lines.
It never change the way to navigate: left and right arrow keys always go to the next or previous tab, regardless of what has to happen visually.
As a bonus, usually, when you click on a scrollbar button, the focus doesn't go to the button; it immediately goes back to the real content, i.e. the text in the text area, or the currently active tab for a tab control.
This is one or more confirmation that scroll buttons shouldn't enter in tab order.
As another bonus, given that you are implementing scroll buttons on your own, you should also react to mouse wheel.
on the following site i have two hidden panels labelled "show map" and "show floor plans".
When the the header of each is clicked the slide panel is opened.
The floor plans is long and thus will go below the page view. is there anyway to keep focus at the bottom of the panel, so that when it's clicked you manage to see the whole window opening, thus avoiding scrolling?
the dev link is: http://marldon.staging.dante-studios.com/property.php
Thanks in advance.
I believe what you're looking for is the scrollIntoView method:
$("#foo").show()[0].scrollIntoView(false);
Passing a value of false scrolls the bottom of #foo to the bottom of the viewport. Passing true or not passing any value aligns the top to the top.
This method is supported both by standards-friendly browsers and by Internet Explorer.