I developed an mobile app for Android using PhoneGap. I also published it for browsers.
On my phone, when I view the app in Chrome, I get the following select menu style :
However, when I open the app packaged with PhoneGap, I get this :
For the exact same code.
How can I style the select menu on the Android device so it appears like in Chrome?
I tried using --webkit-appearance, but I'm not sure how to use it exactly...
I had a similar issue with my dialogs in my Phonegap app in Android. The default theme in a cordova android app is:
android:theme="#android:style/Theme.Black.NoTitleBar"
Take a look to your AndroidManifest.xml, in your MAIN activity. If this is the case change it to
android:theme="#android:style/Theme.Holo.Light.NoActionBar"
Chrome seems to use this theme according your screenshot (or a similar).
You can't but more important you should not!
Each mobile platform has its own design principles which are designed to keep best user's interest in mind. For iOS it could even mean that your app will be rejected.
Even different android builds tend to have different ui principles like in your pictures where the first one shows the select menu from original android and the last shows the select menu from samsungs android.
So you can't style the select menu using css. However you could write a phonegap plugin to give you a custom select menu.
Another option would be to build a select menu without html's select but just javascript. But I would not suggest that.
There is no way to style that using css only. That is not a html component, it's not part of the DOM. Both the selectors you see are added on top of your browser by native methods.
Essentially, if you want to change the default behavior of the select you must build your own select dialog and trigger it when the user clicks on a select.
Check this similar question.
Each browser displays elements in its specific way. You should use -webkit-appearence to try to reset the select to its default appearence:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Related
I am developing an application with the use of Ionic 3.
I would like my app to look the same on all platforms and I want to use a kind of a mix of android and ios styles.
In general, I will go for android (md) mode of the app, but I want to override certain elements to have ios styles.
For example, I would like my toasts, popovers and alert to have ios style and transition animations.
I can't seem to find a way to do it, please help :)
Thank you
I developed a hybrid mobile app.
I was wondering myself if there is a way to change the space between buttons raised from cordova-plugin-dialogs on Android.
They usually look like:
I'm not very familiar with native development (on Android), so is there anything I can change to affect the spacing of those buttons? e.g. on Android manifest or something?
Thanks in advance!
The solution here falls in the "Create your custom dialog in Android" solution, actually. Those are the default dialogs, and the buttons are generated automatically. I don't think you can control anything else than the theme, texts and pretty much that's it.
If you want to be able to completely modify it, create a custom native dialog (for each platform you're targeting, if possible in iOS -not sure right now), and create a cordova plugin that opens that dialog, and returns something when the buttons are clicked...
Or simply create a "dialog" (modal) in html. That will be much simpler, if you're already using cordova.
I'm using the Ionic framework to build my application. My application includes lots of select elements.
When I view the application on Android 4.4, the selects and their options look as expected.
When I view the application on Android 5.0 or 5.1, the text of the options is grey, which leads my users to think the options are disabled (they are not).
Ionic's documentation for the select css includes the following: "Ionic's select is styled so its appearance is prettied up relative to the browser's default style. However, when the select elements is opened, the default behavior on how to select one of the options is still managed by the browser."
Can anyone tell me how I can control the styling of the select options so they don't appear disabled? Monkeying around with Ionic's css doesn't appear to change anything, and I'm guessing that's because Android is "styling" the element, rather than Ionic.
Thanks.
I'm using Select tag. when approaching by PC, I see all the options to choose from. When approaching by Android, I have to touch the select tag and then a window is popped up with the options.
Is there a way to just get a drop-down (as it works on Windows)?
I have to see four/five options of the select tag without to open the popup clicking on.
This is the standard way Android handles select elements in WebViews. If you want different behavior, you'll have to use a select box library such Select2.
I am building a web site that needs to work on computers as well as tablets and I have found that if you have a web form with select tags in it, when you view it with a tablet running android 3.1 the select options are shown in a modal window at the bottom of the page.
when you select options using this method, it is no longer the select option changing in the DOM and you cannot react to changes. Is there a way to disable this so that a dropdown is a dropdown and looks and reacts as it would on a desktop?
Thanks in advance to anyone that can help. (Google has yet to yield any results for me)
Have you tried jQuery Mobile? It basically implements jQuery for mobile devices. I found that there's a way to build Select Menus right there.