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" >
Related
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.
I want to hide upper left icon of material-ui Appbar. Can somebody tell me how can I hide it? because I am not implementing anything on click of that icon
As it saids on the docs, you have two options, you can use for example an empty react component like below on the iconElementLeft property or also iconClassNameLeft
<AppBar iconElementLeft={(<div />)} />
See more here: http://www.material-ui.com/#/components/app-bar
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 want to crate a popup window with close button and the content of the popup will be a split-app master-detail page.Which control should we use to achieve this?
I've tried with a sap.m.page but unable to change height and width.
I've tried with a sap.m.ResponsivePopover but i can't remove the arrow thing on the top from that.
The arrow in sap.m.ResponsivePopover is using the css classes .sapMPopoverArrUp and .sapMPopoverArr so you could probably overwrite them locally to remove the arrow.
Thanks.I have used overlaycontainer to acheive the requirement.
Is there a way to get horizontal scrolling implemented in a horizontal panel ?
or any other panel can be used to achieve the functionality mentioned below -
The requirement is that i am creating a search bar where search items are being added as and when user inputs them (something similar to this - http://documentcloud.github.com/visualsearch/)
Well i got the functionality working and even the looks are similar but struggling on the horizontal panel. I am using a horizontal panel as a search bar and it has a suggest box embedded in it. so when user inputs data the search items are added to the horizontal panel. but as and when search items are added the horizontal panel grows in size and moves out of the screen and browser's horizontal scroll bar appears. But i wanted a scroll bar on the horizontal panel itself.
Can this be achieved ?
want some ideas ... any help is appreciated.
Thanks.
You may want to use the css overflow-x attribute. If you want it to scroll set the value to scroll or auto. If you need to constraint the size of the div in specific ways you may need to control it progamatically.
I don't see any other solution than place your HorizontalPanel inside a scroll panel.
Then I would add a CSS property to prevent the vertical scrollbar from showing.
Here's an ui.xml excerpt:
<ui:style>
.scrollHorizontal{
overflow-y: hidden !important;
/* !important used to force override the style "overflow:scroll"
of the ScrollPanel */
}
</ui:style>
<g:ScrollPanel addStyleNames="scrollHorizontal">
<g:HorizontalPanel ui:field="resultsPanel" />
</g:ScrollPanel>
You may need to check the client height of your scroll panel so as to adjust the height of the items inside the horizontal panel, depending on your layout.