I have a Cross-Platform app.
I use percentages to keep the aspect of the app similar for every screen size.
So i put a view height to
var view = Titanium.UI.createView({
borderRadius:10,
backgroundColor:'red',
height:"100%",
});
window.add(view);
The problem come when i show the keyboard.
The view is auto resized.
So i need that the keyboard goes OVER the view without resize it.
Note: If i use "dp"/"dpi" the height of the view is not the same in different screen devices.
Any suggestion?
I did not have this problem before, but there are several options having the same effect as 100% height:
height: Ti.UI.FILL
height: Ti.Platform.displayCaps.platformHeight
or you could achieve the same by setting the values for
left: 0, right: 0, top: 0, bottom: 0,
All of them should make a view fill the screen.
Please note that it might be necessary to handle orientation changes.
first you need to set top property then if it does not work then also set height with platformHeight.
It's not clear what your complete view looks like. Your example doesn't have a text entry type control which is what would trigger the keyboard opening.
You can create a separate view that contains the textArea and set this 2nd view with fixed positions. Then the main view should stay put.
Related
I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the frame and visible no matter where the user scrolls to on the tab?
To get expected behavior you just need some CSS.
Set height of body and html to 100vh, and overflow: hidden to avoid multiple scrollbars.
body, html {
height: 100vh; /* Viewport height */
overflow: hidden; /* To avoid multiple scrollbars */
}
As a working example I'm gonna use Links of large tab style. Content of every item renders inside PivotItem Component. So, you have to put some styles on it:
const pivotItemStyles = {
height: 'calc(100vh - 44px)',
overflow: 'auto',
}
PivotTabs by default uses height: 44px that's the reason why I put calculate inside height property. overflow: auto is to get scrollable content.
Reference: Pivot.styles.ts
Codepen working solution
Is it possible to have a layout which is wrapped with ScrollView:
<ScrollView>
<View>dynamic height</View>
<View>flex with minHeight</View>
<View>static height</View>
</ScrollView>
and meets below prerequisites:
Height of the first View is dynamic (depends on text length). Height of the third View is static (always three buttons inside). Rest of the screen should be filled with View with map, but the minimal height is set to 250.
Now the tricky part: if there is a lot of text in first View, so that map doesn't fit, a scroll should appear. I couldn't achieve that. I was trying to give the map View flex: 1 and minHeight: 250, but it's not rendered at all.
Solution
Ok, I've found a way to fix it. In first render, I get screen height (Dimensions) and height of first and third view (onLayout). Then, I calculate the height of second view (screenHeight - view1 - view3 - naviagtionHeight) and forceUpdate() to re-render it.
Add contentContainerStyle={{flexGrow: 1}} prop to ScrollView and its children's flex:1 would work. So you don't need to calculate it manually.
I would like to animate a view.
I want the view to slide from the bottom to the top of the screen.
I wrote this code, but the view doesn't show up.
myWin.add(myView);
myView.height = '0%';
var expand= Ti.UI.createAnimation({
height: '100%',
duration: 300
});
myView.animate(expandView);
Reference is this document
#whitebear. In your problem, you want make the view slide to top from the bottom, but you had taken a wrong way. The way you had taken is a Shape Change Animation, which want to change the height of the view to make it. However it's will never get the sliding action you want, if your code work, what you will see is the view will get more and more bigger until fill the window, not a sliding action.
What you want is a Position Change Animation for the view. Just change the top value of the view can make it. Example:
var view = Ti.UI.createView({
top: '-100%', //the view can't be see at the bottom
width: '100%',
height: '100%',
backgroundColor: 'red'
});
var ani = Ti.UI.createAnimation({
top: 0, //show the view from the bottom to top
duration: 3000
});
view.animate(ani);
Just have a try, I hope this can help you. If you really want to change the height of the view to get the effect, maybe you can define a method to set the view height with the time. Good luck!
You should call animate method of view passing it reference of animation object you created.
myView.animate(expand);
For you requirement try this
var win = Ti.UI.createWindow({ backgroundColor : '#fff'});
var myView = Ti.UI.createView({backgroundColor : 'red'});
win.add(myView);
myView.height = '0%';
myView.bottom = '0'; // basically the view has been added at bottom of window
var expand= Ti.UI.createAnimation({
height: '100%',
duration: 1300
});
myView.animate(expand);// and you are only increasing the view's height in animate
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.
I am trying to slide a Panel from the bottom, so that it covers the entire viewport, like the Bookmarks panel in iOS Safari. This is similar to the ActionSheet, but fulscreen, and without the dark frame around it.
this.advSearch = Ext.ComponentMgr.create({xtype: 'advanced_search', itemId: 'pnlAdvancedSearch'});
this.advSearch.autoRender = true;
this.advSearch.show({type: 'slide', direction: 'up'});
This sort of works, but the new panel doesn't fill the whole screen, and parts of it appear behind the background panel. I've tried various layouts, including fit, vbox, with varying degrees of ugliness, but the root problem seems to be that the panel doesn't know how tall it needs to be. Maybe because it doesn't have a container?
Any suggestions? Is this even the right approach, or should I try to hack the ActionSheet to expand to fullscreen, and show without the border?
Thanks.
Because your panel is floating (or I presume it is), you will need to give the panel a fixed height in Sencha Touch 1. You are very restricted in that respect. This following code should work:
var sheet = new Ext.Sheet({
html: 'hello',
style: 'color:#fff',
height: window.innerHeight,
stretchX: true
});
// replace this show with your animation
sheet.show();
As you can see, I give it a fixed height of the window and then stretch it on the X axis (y doesn't work).