I have been facing an issue with clearButtonMode property of UiTextField in my input box. If I use app in light mode then everything work well but the moment I switched to dark mode that clear button is not at all visible in input box.
So, Just want to know is it Possible to add backgroundColor to that button for dark mode?
Or is there any possibilities to make it visible in Dark Mode.
I have attached the code and screenshot of my problem.
Here is text Field code.
var checkField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 10,
left: 10,
right: 10,
color: '#000000',
backgroundColor: 'white',
tintColor: '#000000',
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE,
clearButtonMode: Titanium.UI.INPUT_BUTTONMODE_ALWAYS,
});
Screenshot:
Thanks in Advance!!!
it looks like it is a very light grey (when you set it to a dark backgroundColor you'll see the X again.
But it looks like it is native behavior:
https://developer.apple.com/forums/thread/124973
and you'll need to create a custom textfield image (https://stackoverflow.com/a/10274246/5193915) but that means inside the SDK.
As a quick workaround I would just create an image and place it on top of the TextField and move it to the right corner.
Related
I'm making a game in React Native. Part of the game includes a grid of buttons in a dimond shape similar to this:
To make it more complex, the assets are in SVG format. Although I am able to make a button using an SVG, what I'm a bit stumped on is laying out the buttons in this dimond shape, with an SVG layer behind it, and keeping that shape, with the buttons overlayed intact with different screen sizes.
Does anyone have experiece with this?
You can try with transform like
<TouchableOpacity
style={{
height: 30,
width: 30,
marginVertical: 10,
borderColor: 'black',
borderWidth: 2,
transform: [{ rotate: '45deg' }],
}}
/>
Stack:
React Native
React Navigator
Core components only
I have this style on TabNavigator.tsx:
const styles = StyleSheet.create({
tabStyle: {
backgroundColor: colors.background,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
height: 80,
overflow: 'hidden',
// position: 'absolute', // needed to ensure the bar has a transparent background in the corners
},
})
I keep commented the position absolute, there is always a background behind the corners, making it looking weird when a component of another color scroll.
Here it is, colored in yellow for visibility:
If I un-comment position absolute, the content flow behind the tab bar, making it feel more natural.
But...
I need to add a bottom margin on each screen to compensate the space that the tab takes, or the content in the bottom is hidden.
There i feel that there should be a good practice or a known pattern, maybe a tested workaround, that would make my life easier. Do you have an idea?
Thanks
Ahh, it's simple, after going through trial and error I discovered that just add Border Radius to it and make sure barStyle has overflow hidden. Here I pasted the snippet for it.
barStyle:{
borderRadius:50,
backgroundColor:"orange",
position: 'absolute',
overflow:'hidden',
left: 0,
bottom: 0,
right: 0,
padding:5,
}
Thnx me later...
tabBarOptions={{
style: {
backgroundColor: 'green',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
overflow: "hidden",
},
}}
I have a simple progress bar, it has a borderRadius and overflow set to hidden. I have a child of this, it has no borderRadius, and it is overflowing outside of the corners. Here is my markup:
<View style={style.progressbar}>
<View style={[style.progressbarfill, { width:'50%' }]} />
</View>
const style = {
progressbar: {
backgroundColor: '#ccc',
height: 25,
width: '90%',
borderRadius: 12,
overflow: 'hidden'
},
progressbarfill: {
backgroundColor: 'springgreen',
width: '10%',
height: '100%'
}
}
This is what it looks like:
I put arrows on where the green is covering the border. The green should not overflow outside the edges.
Does anyone know why this is?
Actually I'm testing it right now, seems to be working fine on iOS, but Android is the one having the issue with the overflow right now. It looks like that is still getting more support currently. A temporary fix, is to just add the same borderRadius on the progressbarfill.
Here is the issue on the React Native Docs:
The overflow style property defaults to hidden and cannot be changed
on Android This is a result of how Android rendering works. This
feature is not being worked on as it would be a significant
undertaking and there are many more important tasks.
Another issue with overflow: 'hidden' on Android: a view is not
clipped by the parent's borderRadius even if the parent has overflow:
'hidden' enabled – the corners of the inner view will be visible
outside of the rounded corners. This is only on Android; it works as
expected on iOS. See the corresponding issue.
I found that, in addition to overflow: 'hidden' needed on the parent, I also needed backgroundColor: 'transparent' added to the parent
Edit: I also found that sometimes testing this required a refresh of my app.
I have a scroll view defined in the XML file for a controller:
<ScrollView id="searchResultsContainer"/>
In the TSS, I show the scrollbar indicator to true:
"#searchResultsContainer":{
backgroundColor: "#fff",
layout: "vertical",
width: "100%",
top: "65dp",
height: "400dp",
showVerticalScrollIndicator: "true"
}
How do I set the colour of the scroll bar? It is currently grey and not very visible on a grey background.
You can edit these properties, create a new custom theme, you can set them to a 9 patch image for example.
I created a controller for a button I want to reuse in my Titanium application. I use the createController in one of my windows and add it to the window. So far so good.
However, the button seems to be having a full window worth of height, and I can't find a way to change this. What am I missing? Below my files:
view button.xml:
<Alloy>
<View id="generalButtonContainer">
<View id="generalButton" class="generalButton" onClick="callback" >
<Label class="generalButtonLabel" id="generalButtonLabel" />
<ImageView class="generalButtonIcon" />
</View>
</View>
</Alloy>
button.tss:
".generalButton": {
height: 60,
borderRadius: 2,
backgroundColor: '#5ba7e6',
left: 10,
right: 10
}
".generalButtonLabel": {
color: '#ffffff',
font: {
fontSize: 16
},
left: 15
}
".generalButtonIcon": {
image: '/images/generic/arrow-thin-right-white.png',
height: 15,
width: 15,
top: 22,
right: 15
}
"#generalButtonContainer": {
width: 320,
height: Ti.UI.SIZE
}
And here I include it in my parent window
Alloy.createController('button',{text: 'signup.button.continue'});
$.signupButtonContainer.add(buttonView.getView());
And now, even though I specify a height, (also in the parent window on signupButtonContainer : Ti.UI.SIZE) I still get a full window height view.
How do I fix this problem?
edit: in case there is any info you're missing, just ask! Complicated question with lots of information
I don't see anything obvious. Debugging these layout issues can involve some trial and error. I'd suggest two tactics.
1) Check the generated code in Resources/platform/alloy/controllers/controller.js to see if there's something obvious there. Keep in mind the default heights/widths for the various layout components for those components you see without explicit values.
2) I would suggest you use LiveView or TiShadow so that you can see layout changes quickly. Then, start setting background colors of the various elements to obvious colors (strings like pink, orange, green, etc. work well) to see which is filling the screen.