I have a button that is 40x40, now this button has an active state where the container of the button extends and menu items come in. The active state has no specific width to it and should extend to accommodate for the content (something like width: auto; in CSS).
Is there a way how I could use animate this width change using Animated?
Thanks in advance
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
The application i'm making has a scrollview which contains a child and i want to dock the child to the top when it reaches top of the screen ?
You can show any object at the top of the screen by using absolute position.
exampleStyle: {
position: 'absolute',
top: 0
}
In order to create a docking effect, you can render the child with the above styling after some scrolling. You can check the scroll value by setting onScroll of ScrollView component. (https://facebook.github.io/react-native/docs/scrollview.html)
use stickyHeaderIndices={[0,2,3] where the array represent the immediate child of the ScrollViewuse stickyHeaderIndices={[0,2,3]} props of the ScrollView where the array represent the immediate child of the ScrollView that needs to be docked
I have a Modal with a ScrollView inside and some items inside the ScrollView. When the Modal popped up, the item's border is not aligned to the Modal's border. Some components like TextInput become thinner and some is overflow. It's not like this outside of Modal.
This can be solved by setting component's offset explicitly relative to Dimensions.get('window').width. But I just want an implicit solution.
I've done trying setting style properties for ScrollView's contentContainerStyle and also putting a wrapper View inside the ScrollView. None of them works.
I've made it after wrap ScrollView with a View with style flexDirection : 'row'. Yet to figure out why
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.
How can I set button width to wrap content?
Default html button wraps content, but default sencha button use all width of parent.
Next question. If button width wraps content, how to align button?
Thanks
As far as I know, there is no Ext.Button config like textWrap: true in Sencha Touch 2. But you can try a work-around. Normally you can use width and height config to set absolute size of the button, and minWidth, maxWidth or minHeight, maxHeight for the lowerbound and upperbound of width and height, you should combine them with CSS styles of your text.
About alignment: Ext.Button is just like other Ext components, if it belongs to a parent container, then the config centered:true should align it to the center of the parent container.