I have a problem with space key (Space bar) on the keyboard, which doesn't work when I try to type text in FeedInput on Fiori Application. It is possible to add empty space in case I press Shift + Space. This combination works on PC, but not on mobile devices.
I know that the problem happens because I'm embedding the FeedInput inside <headerContainer> or some of the other UI elements. It's actually not relevant only for FeedInput, but also for Input, SmartField in SmartTable, etc.
I can see that SAP provides the following info for class sap.m.HeaderContainer:
The container that provides a horizontal layout. It provides a horizontal scrolling on the mobile devices. On the desktop, it provides scroll left and scroll right buttons. This control supports keyboard navigation. You can use ← and → to navigate through the inner content. The Home key puts focus on the first control and the End key puts focus on the last control. Use Enter or Space key to choose the control. (source)
I found that if I delete event listener in browser debugger for KEYPRESS body#content.sapUiBody, the space bar starts working fine for all type of text fields.
<ObjectHeader id="ohDetails"
numberState="Success"
responsive="true"
>
<headerContainer>
<IconTabBar id="itb1"
select=".onIconTabBarSelect"
expandable="false"
>
<items>
<!-- ... -->
<IconTabFilter id="iftLog"
key="logKey"
icon="sap-icon://notes"
>
<VBox alignContent="End">
<FeedInput id="fiComment"
class="sapUiSmallMarginTopBottom"
post=".onSubmitComment"
icon="sap-icon://comment"
placeholder="{i18n>plhFeedInput}"
/>
<!-- ... -->
</VBox>
</IconTabFilter>
</items>
</IconTabBar>
</headerContainer>
</ObjectHeader>
There is nothing wrong with putting <IconTabBar> as the header container of <ObjectHeader>. In fact, the <headerContainer> aggregation awaits <IconTabBar> as one of the controls that implements "sap.m.ObjectHeaderContainer".
The reason why it didn't work was because of the regression introduced with commit:d05437d while trying to prevent scrolling when the space bar was pressed. With commit:38f5481, it's all fixed now.
Preventing all pressing of SPACE when inside ObjectHeader caused that, in case there is Input field inside HeaderContainer, the user couldn't enter space in it.
On the other hand, SPACE is still prevented on all interactive elements of the ObjectHeader.
Demo: https://jsbin.com/takequm/edit?js,output
Update: the fix is now distributed with 1.67+. After updating the UI5 resource bootstrap to, for example, src="https://ui5.sap.com/1.70.0/resources/sap-ui-core.js", we can see that the spacebar works again.
Related
I have a home page where there are tiles which will redirect to a new splitapp page. Inside one of those generic tiles I have to show the entire splitapp view with some modifications. I know we can add multiple content inside a Tile content using vbox, but is it possible to add the entire splitapp? I tried it, but it displays nothing other than just increasing the height of the tile.
What i have tried is -
<TileContent>
<Vbox>
<SplitApp id="idAppControl"></SplitApp>
</Vbox>
</TileContent>
This just increases the height of the tile but displays nothing.
Ionic has this neat feature of scrolling the focussed <input> element to the top on focus.
I do not want this behaviour, but instead want the "page" to remain static on <input> focus and blur, just letting the keyboard slide in and out.
I there any way I can achieve this without tricking the css?
Thanks!
In platform/android/AndroidManifest.xml add below line to activity.
android:windowSoftInputMode="adjustPan"
Like this
<activity android:windowSoftInputMode="adjustPan" >
Thanks for reading my post.
I just started developing an app in Ionic 3 and there is an issue I ran into. I want to have a box to enter text into. When I use following code, I can enter both single line text as well as multiple line text.
<ion-item>
<ion-label>Message</ion-label>
<ion-textarea [(ngModel)]="_message" name="message"></ion-textarea>
</ion-item>
But the issue is that the size of the box does not change. As I press Enter and type more words, the upper text hides because the view scrolls down. There is still space left in the view and I tried to adjust it, but couldn't.
Also, upon doing Google research, I did found a comment mentioning that this is a defect in Ionic Framework. But, I am not sure.
Thank You
It doesn't dynamically grow by itself. But you can increase the number of rows statically by adding rows.
<ion-textarea rows="5" [(ngModel)]="_message" name="message"></ion-textarea>
You can also try to modify its size dynamically yourself. Here is a sample code that does this.
I have a SAPUI5 app with JS views. I have a problem regarding the footer of my detail page - I created a button there and after initialization it is marked in the browser. I am not sure whether this is a Google Chrome problem or something with my coding. The code is not complex, so I dont know where to search for the origin.
Code and image of the problem:
<Bar>
<contentLeft>
<Image src="./images/image1.jpg" height="80%" />
</contentLeft>
<contentRight>
<Button icon="sap-icon://action-settings" press="handleSettingsButtonPressed" />
</contentRight>
</Bar>
Well, what you see is the visualization of the focus and as such helping users to navigate with keyboard-only. You didn't paste a lot of context for the code, but if there is a NavContainer/App control around, it automatically focuses the first focusable control in each displayed page (this will be made more flexible soon).
Of course you could remove the focus by calling blur() on document.activeElement, but I'm not sure this is the best thing for users...
I agree with akudev's answer on this. What you are seeing is the focus indicator showing that button currently has focus. Presumably you want something to have initial focus, but it's not 100% clear from the question what you'd like to be different.
If you want the focus indication to look different you can modify that (or even eliminate it entirely) using CSS. Eliminating it entirely is probably going to make it harder for the user to know what's going on.
If you want a different element of the dialog to get initial focus you can use the initialFocus association to set the desired element.
I have a GWT application for which I'm trying to write some tests using Selenium.
I'm using XPath to identify the elements on the page for the tests. Using id won't work as the id values are auto-generated by GWT and can change. Things started going well when I realised I could find buttons by their labels as follows:
//button[.='OK']
However, when I started running multiple tests I started having problems. I realised that the issue was all the different "pages" of the GWT app once generated by the Javascript remain in the HTML in hidden <div> elements. This meant my Selenium tests were sometimes clicking hidden buttons instead of the button visible in the current view.
Examining the HTML with Firebug, it seems that GWT hides the <div> elements by adding display: none to their style attribute. This means I can find all the hidden OK buttons as follows:
//div[contains(#style,'display: none')]//button[.='OK']
This will find all the hidden OK buttons, i.e the buttons which have an ancestor <div> which is hidden by having display: none in the style.
My question is: how do I use XPath to find only the visible OK buttons? How do I find the buttons which have no ancestor <div> elements with display: none in the style?
This should work:
.//button[.='OK' and not(ancestor::div[contains(#style,'display:none')])
and not(ancestor::div[contains(#style,'display: none')])]
EDIT:
The simpler and more efficient expression below:
//div[not(contains(#style,'display:none'))]//button[.='OK']
does not work properly because every button has at least one div that's visible in its ancestors.
Selenium 2 Webdriver gives us the option of the isDisplayed() method which deals with this problem. Nice work by the selenium contributors.
This works for me:
//div[not(#hidden)]
//div[(contains(#style,'display: block'))]//button[#id='buttonid']
This worked for me. Like 'display: none' representing hidden blocks, 'display: block' represents currently displayed block and we can specify any inner tags to be identified as above
For me this worked to eliminate hidden elements:
//div[#open]//*
I added this code to the namemapping editor and it did not find the Keep button once it came up. The system sees it in the editor but it doesn't want to click on the button whenever create a new test which will include this item.
Now one other thing this is a dynamic button click so what happens is I will select a button that opens up a to drop downs where I place these items inside those dropdowns. Now it works for the first item but fails to recognize the same mapped item for the next time it is used in another screen. The buttonKeep is the same in both areas.
//div[contains(#style,'display: block')]
This code will find visible element xpath