I got two input text. First one is for an email, the problem comes when I write more text than the width of this input, the rest of the text doesn't see. The normal behavior would be scroll horizontally to see the rest of the text, right?
I don't know if I'm missing something, but it doesn't work.
Here is the example code: rnplay.org
Edit: This is the effect I wanna get, this is from UI Explorer Example from official React Native repo:
Thank you!
I was be able to solve it.
I don't know why, but the problem comes if I have set both paddingTop and paddingBottom to the input text.
If I remove one of them, then the input text works perfectly, here is an example: Input text working well
I hope this can help someone too.
Thanks.
I threw a hacky thing together here, basically wrapping the TextInput in a horizontal ScrollView:
https://rnplay.org/apps/q7M2Pg
<View style={{ backgroundColor: 'white', overflow: 'hidden' }}>
<ScrollView horizontal={true} style={{ marginBottom:-7 }}>
<TextInput
style={ [styles.loginFormInput, {width:width}] } />
</ScrollView>
</View>
Theoretically to make this better, you could call an onChangeText method to set the width to make it nicer (though a native way would be ideal of course).
Don't see any configuration for that in the source at all however, hopefully someone can come along with a better answer!
Related
I have been following the react-navigation getting started guide. I’ve not modified anything beyond adding...
options={{
...TransitionPresets.ModalPresentationIOS,
cardOverlayEnabled: true,
gestureEnabled: true,
headerShown: false
}}
...to the modal to make it look like iOS 13.
It works and animates great, but I’d like the back-background to be black. In the screenshot below, I’m talking about the darkest grey color that the time and battery icons are on.
I tried setting the background of the Theme to black, but that made all the cards black. Is there a way to only make that far-far background black?
I’m sure I’m not being clear, but thanks in advance for any guidance.
You should wrap your navigator into a View like this:
<View
style={{
backgroundColor: "black",
flex: 1,
}}
>
<Stack.Navigator>
{/* Your screens */}
</Stack.Navigator>
</View>
if i get your question right it's about the theme color, which you can find in the index.HTML file.
You should see a meta tag in the head which looks something like this:
<meta name="theme-color" content="#000000" />
Let me know if i got it right.
I am writing a react native app.
I want to make a press. See more like we usually see for more information of something. How can I do that?
Like here
Text components have an onPress prop, where you can pass an arrow function
<Text onPress = {() => this.myFunction()}>
See More
</Text>
Note: Adding some style props, eg color: 'blue' and fontWeight: 600 can help your text look pretty similar to your provided photo.
When Admin-on-rest is running on safari mobile (and presumably all small screens) wide views cannot be scrolled horizontally. This is particularly problematic because in List View often the "Edit" link is on the right of a row.
There is no way to pinch-zoom out to expose the missing parts of the page.
This can be reproduced on the demo site: https://marmelab.com/admin-on-rest-demo/#/
Looks like the culprit is a CSS style using flex-direction: column
Removing this style reinstates horizontal scrolling.
Is this a bug (possibly a cross-browser issue?) or is this limitation necessary for a reason that I'm not aware of?
Possible solution: Remove overflow-x: hidden on the table container which allows a wide table of results to be scrolled horizontally but keeps the overall page width the same size as the page so buttons/filters/etc are aligned correctly.
Don't use the datagrid on small screens. See the documentation about this: https://marmelab.com/admin-on-rest/Theming.html#responsive-utility
I'm using this way to horizontally scroll in small size devices:
export const ReservationList = (props) => (
<div style={{
display: "flex",
flex: "1 1 auto",
overflowY: "hidden",
overflowX: "scroll"
}}>
<List {...props} title="Reservation List">
<Datagrid>
...
</Datagrid>
</List>
</div>
);
Anything I tried failed so far to get Firefox to underline some text.
According to Google-results this issue is known and documented for more than five years ... that just can't be true ... what is going on?
Someone knows any consitently working workaround or maybe even a reason as to why they didn't fix it yet!? ... I am very curious about that
Underlines on text in SVG, as well as other text decoration, is not supported in Firefox yet, that is true. (Bug 317196 attests to that.) There is a plan to rework the SVG text layout code over the next few months, the result of which should be (among other things) underlines working.
In the meantime, if you really need them (and cannot draw them manually with a <line>, because for example you don't know the text metrics), you could use a <foreignObject> to include some HTML content with underlines.
In my Firefox, a ForeignObject text within an SVG gets perfectly underlined if I include it in the right tags:
<html:u>blub</html:u>
... having declared html as a namespace in the svg, sample code looks like this:
<div style="border:solid black 2px;">
<svg:svg xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
width="300" height="50" >
<foreignObject width="80" height="50">
<html:u>blub</html:u>
</foreignObject>
</svg:svg>
</div>
Would that be a solution for you?
So I'm trying to give my air application a custom style, I've set the showFlexChrome to false and that's ok it works. now I would like to use an image window I designed in photoshop as the background (because now there is no background in the application).
I did the following but it doesn't work
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:views="be.KHM.ProjectManager.models.views.*"
width="850" height="500" currentState="index" creationComplete="init()"
showFlexChrome="false"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
backgroundColor="white"
>
< mx:Style>
WindowedApplication
{
backgroundColor: white;
backgroundImage: "be/KHM/ProjectManager/assets/mysimpleproject_interface.jpg";
}
</ mx: Style>
The path is correct and I don't receive any errors but the background of my air app is still transparent. I tried to put a canvas around everything between my windowedapplication and give that a background image, but because I work with states it will give me the error that the states cannot be initiated within a canvas or something like that.
Try putting a ClassReference("be/....") for the backgroundImage style setter.
Edit:
Oh, wait... that's not a class.
The problem could be that you have the wrong combo of showFlexChrome and the FlexChrome property in your xml compiler file.
My suggestion would be to take a look at the source of the SalesForce app that someone built when 1.0 came out. It has some decent css and window styling examples.