Nativescript textfield hint color

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub?

Ecg prayer line

Sign in to your account. Is there way to style with css TextField underline color, underline color when focused and cursor color? Hi bori87You could setup bottom border to the TextField and to set the needed color to it.

For example: XML. For further question please use our forum or StackOverflow thread. I know this but i dont know how to change textField focused state bottom border with css. Hi bori87This topic has been discussed in issue There you will also found a possible solution about this case.

Hope this helps. This thread has been automatically locked since there has not been any recent activity after it was closed.

nativescript textfield hint color

Please open a new issue for related bugs. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Sign up. New issue. Jump to bottom. Copy link Quote reply. This comment has been minimized. Sign in to view. Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in. Linked pull requests. You signed in with another tab or window. Reload to refresh your session.

You signed out in another tab or window.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

How to Get Rid of the TextField Border on Android in NativeScript

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account.

In my application, i'm using a SearchBar component. I want to set a dark background and so, a light text hint color. But when i use the textFieldHintColor property. Only the hint text is setted and not the search icon. Hi guillaume-roy.

Data center consolidation ␺

Thank you for your issue. Unfortunately the SearchBar icon is an image and its color can not be change. With textFieldHintColor property you can change only the hint text color.

V2ray ipv6

This is something android specific. You create your own SearchBar by using GridLayout. I am attaching sample code.

Invitation card format for football tournament

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Skip to content.

NativeScript Tutorial #5: A peek into codebase

Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. New issue. Jump to bottom. Copy link Quote reply. This comment has been minimized. Sign in to view.This is a guest blog post from Dave Coffin. When I transitioned to mobile development from web development, there were all these UI questions I hadn't thought thoroughly through before.

The web is forgiving, mobile users expect less from it. That's arguably not a good thing considering how far its come, but far less attention to detail is paid to UI and UX on the web when compared to mobile. I believe thats because of the high standard mobile experiences have set, and have conditioned users from the outset to expect a certain experience on mobile.

Anyway, today I found myself addressing one of the UI questions, how to deal with users selecting an option from a very long list. On the web, I have done this. Its not great, actually quite bad, but hey, its the web who cares? Theres not even the option of considering this on mobile, thanks to the aforementioned standards, its hard to create a UI this unwieldy for the user.

It's definitely not impossible to make bad UIs on mobile, don't get me wrong, but I wanted something cleaner and easier to use. The context here is I integrated Zendesk into this application, and we have a pretty robust Zendesk operation going, and I need to offer the user options to submit with their tickets.

So instead of making the user scroll forever to find what they're looking for, I wanted to let the user filter the list by typing. Here's how I did it:. Side note: I am using Angular here, but this is just as easily achievable in regular NativeScript by using an Observable Array.

nativescript textfield hint color

I really like concise UIs that keep the user in the context of what they are doing, so I chose to display the ListView in a little overlay. It sits on top of my other layouts by just stacking GridLayouts on top of each other. The main view to add a ticket which is also an overlay of sorts looks like this:. You may notice those "Tap to choose Using the input class, I set it to look link its a hintand the hasData class looks like a TextField with text in it.

But the user can't edit it, the value is supplied by the filterable picker. The GridLayout below is set up to have 3 rows and 3 columns, creating a box in the middle basically. The longListPickerDimmer is just a semi opaque black background to sit on top of the other views. The file is a bit truncated to only show setting up the filterable list picker for the "Products" ticket field that I get back from my call to Zendesk.

Lets walk through that file The show function shows the create ticket UI. It calls a method in my support service to get ticket fields from zendesk, then handles the results. Zendesk returns the options for these fields in odd strings that are meant to categorize the options, separating the categories with The showProducts function is called when the user taps the Label where the product name should display once picked.

That sets the array itemsToShow to be the list of products we build in show. It's pretty simple, as the model changes, it sets itemsToShow to be a filtered version of the full array. We had already set up unfilteredItemsToShow to be an array that contains all options so we can use that to filter from. Then we use the awesome TypeScript feature filter to build a new array. We pass a callback that only returns the products that contain the contents of filterItem : return item.

Notice we make both lowercase first, we don't want this filtering mechanism to be case sensitive. When I was setting up the data I got back from my Zendesk call, I also created maps of the entities with the keys being the items that I display in my ListView. This makes it super simple to get the full entity back, which I'll need when actually creating my ticket.

Once I have the product name of what they chose, all I need to do to get the full object is this. I hope to make this into a cross platform NativeScript plugin in the near future.

nativescript textfield hint color

NativeScript is the absolute best, I love that I can use my TypeScript and JavaScript knowledge to do cool things like this, and create fully fledged mobile apps. If you have any questions, are in the market for a freelance app developer, or just want to say hey, get in touch with me at davecoffin.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Thanks for the reply, but i want the the output as show in the above attached image.

The code what you have sent is went we type the text in the text field then the color of the letters changing, but i want went we write first the code then only i must get the text color same as shown in the image.

Hi karumurikiran. You could set hint text color to your TextField. I am attaching sample code below. Hi chrillewoodzIn this case, you could now use placeholderColor CSS property as you can see in the documentation here. Please, for more How to questions use our NativeScript forum.

nativescript textfield hint color

Yes I am doing that I just thought it was a valid thing to add to this issue, as a lot of us are using angular. This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. New issue. Jump to bottom. Copy link Quote reply.The NativeScript project provides a core theme that you can add to any of your projects.

The theme includes two color schemes, light and dark, as well as a series of convenience class names to help you build elegant user interfaces quickly.

All official NativeScript templates come with the NativeScript Core Theme prepackaged and ready to go, so manual installation is unnecessary. Your app. Note: NativeScript 6. A detailed migration guide can be found here. In case you need information on how to use the old nativescript-theme-corerefer to this article.

Note: The dark mode support was introduced natively with Android 10 and above and with iOS 13 and above. To use the default color scheme with accent color blueadd the following lines of code to the top of your app. You may want to alternatively use one of the 11 other color schemes included in the NativeScript core theme. To do so, switch the second import in your app.

The files are now located in the root of the theme package as opposed to nativescript-theme-corewhere they were in a particular scss folder. If you prefer to use the old classes for styling from nativescript-theme-coreyou can import the. Note : This image shows all 13 color schemes on iOS and Android, and can help you decide which color scheme is a good fit for your app.

The NativeScript core theme contains a wide variety of CSS class names you can use to style your applications quickly. Several utility class names are available for changing the display of text you use in your applications.

The NativeScript core theme does not change the base font family you use to develop your apps; however, the theme does provide a series of font-related class names. Several class names are available to control the spacing of UI components within your application.

The first set of class names allows you to add margin or padding to a given UI component quickly. Below is a full list of the class names available, along with the rules that they output.

A divider is a common way to separate areas of your user interface. The NativeScript core theme provides a set of utility class names that can be applied to UI components in your application.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. I believe this section where the tutorial styles the hint text of the input fields is a very nice situation where custom directives can be introduced to the user. I think a directive is actually also more suited for that.

Might as well be repeated in both the iOS and Android implementation, but just showing how I did it. So the only way I believe this can be solved is by using the good old require :.

The only thing we have to do is add a hintColor attribute to our TextField component. A major benefit on this one is that the view is responsible for the styling and rendering of the component. This way you decouple that from the login component. If you guys agree, I'm always willing to do a PR and try to change the docs with this implementation instead.

Hey SamVerschueren. I love this idea. One suggestion: please use just one file for the directive and avoid the. For the tutorials I like keeping the number files to a minimum, and also I like using this section as a way to teach how to use if statements to fork platform code.

Class TextField

Using one file should also remove the need to use require. Just keep the current structure; implement the directive in 6. Ping me in the PR. Definitely good idea! Extracting platform specific code into separate directives you can even put them in a plugin is a great way to keep the code clean. I'm not sure if there is a way to define all in one file as you have to have different implementations of the same class depending on the platform.

You can, of course skip the base class, and do single class with an if-platform check inside the setColor. Personally, I would prefer multi-file approach. It will be used compile-time so that tsc is happy. Go ahead and move forward with whatever you think is the cleanest approach.

I think this could work well because it also gives us a chance to talk about. Just out of curiosity have you made any progress on this?

While debugging i got error in hint-color.This tutorial will show you how to get rid of the bottom border…. This tutorial will show you how to get rid of the bottom border of a TextField in a NativeScript Android application.

When you add a TextField in your NativeScript app, by default it has no border on iOS, but on Android, there is a persistent border at the bottom. This is part of material design and it comes out of the box in NativeScript. You might find that you prefer a TextField without a border on Android as well, but getting rid of it is not so straightforward. We'll soon see how you can achieve that.

The app contains two TextFields and as you can see both the focused and unfocused TextFields have a bottom border. Intuitively, you might think that setting the width of the bottom border to 0 might work with border-bottom-width: 0 or border-width: 0but that doesn't get rid of the border.

To get rid of the border, add the following styling:. For it to work, you need both rules and the border width can't be set to 0. The solution is a bit strange and not intuitive, but it works.

As you can see below our app now has borderless TextFields:. Hopefully, you found that useful. If you have any questions or comments about the tutorial, leave them in the comments below, or get in touch with me on Twitter digitalix. You can also send me your NativeScript related questions that I can answer in video form. Use the iScriptNative hashtag on Twitter so I can find you. For more video tutorials about NativeScript, check out our courses on NativeScripting.

We have courses that cover all flavors of NativeScript Core, Angular and Vue and that cater to different levels of experience, whether you are just beginning your journey in the NativeScript world or you have some experience with NativeScript and are looking to level up. So how do you vertically center text in a…. In this tutorial, you'll learn how to use multiple nested frames to separate your UI, enabling you to navigate one part of the screen while….

Alex Ziskind Follow. Take control of your career. Build JavaScript mobile apps. Join the FREE training webinar. TL;DR Here's a video for you if you prefer watching the tutorial:. Alex lives in Washington, DC. He's a speaker, trainer, and a Telerik Developer Expert. He's been invloved in NativeScript projects since and has created courses for Pluralsight and LinkedIn.

Did you enjoy this? Share it! So how do you vertically center text in a… Read more Next: Multiple Frames in NativeScript In this tutorial, you'll learn how to use multiple nested frames to separate your UI, enabling you to navigate one part of the screen while… Read more Stay in the know Get updated with course releases and discount coupons.


Comments

Leave a Comment

Your email address will not be published. Required fields are marked *