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.
Related
I already know about user-select: none css rule, but it doesn’t help me with my problem.
The thing is I have my own custom menu that appears when I long press or select text in my paragraphs, however the android default menu is displayed on top of my own and hinders the user experience.
I know there is a cordova plugin that already takes care of the issue in iOS but I couldn’t find one for android.
I want to remain able to select my text, with my own custom options on top of that but disable the default android menu. Please help.
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 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;
}
I am developing a cross-platform application using phonegap and jquery. In my HTML document I have a select element with several options. On Android, when the user taps on the select element, an overview of all options opens using the standard Android dropdown (something like an overlay with all options). So far so nice, but unfortunately my options have too much text that eventually gets cut off at the end. How can I adjust the size of the text here? Any hints? Adjusting the text size via CSS is simply ignored. I am thinking of using radio buttons instead, but that is just a workaround for me.
I read listview is another way to handle this problem. Select is fairly limited to my understanding.
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.