When a <select> tag is used in a HTML page, is there a way to style the text size in
the scroll wheel that shows on the iPhone?
There is this alternative.
http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
It uses javascript to put the elements on the page.. I used it for a web/ iphone app and it worked really well. There would be custom styling if you wanted to change the default text sizes and you could also load in custom images..
I don't believe you can style the wheel that shows up on the iPhone directly. In fact, even modifying it in browsers has weird support. For example, http://jsbin.com/obake3 doesn't work at all in Chrome, only modifies the actual drop down in Safari and stretches the graphic in a very ugly way in Firefox.
We investigated and couldn't find any reliable way of altering the display so we looked into different libraries. We're having good luck with the Mobiscroll library for jQuery. It is a more up to date project than the cubiq project referred to in other responses.
The control is themable. You can easily change the appearance of if in CSS. It also comes with pre-defined, nice looking color schemes.
We chose it because it works across devices allowing for a more consistent look & feel.
Taken from Sitepoint Ref
The select renders slightly differently depending on the browser and operating system in use, and is well known as a troublesome HTML element to style with CSS (because the display is inherited from the operating system, rather than provided by the browser)
Related
My website's Arabic font letters appears separated from each other which makes it un readable so I want to use a different font that will display only on iPhone & iPad devices in wordpress, I am using Elementor to design the site. Is there's a code or plugin I can use to apply different font for iOS devices?
https://ozaro.com/ar/our-history/
Well you cant do that just using css. You'll need JavaScript too.
Here is an answer on finding if device is iOS or not.
So basically this is what you'll have to do.
Set a unique classname for the parts of your website you need that font to be applied. E.g. "arabicf"
Go to your footer builder and drag drop an html widget.
Inside the widget write your js between script tags.
P.s. the logic behind the js is simple
If ios then "arabicf" style fontFamily = X.
I also have this issue. I am using Ubuntu and just completed the Hello world tutorial. I wrote some more text and I am unable to scroll. I can see where the words keep going but nothing I have tried lets it scroll. I have not made any HTML/CSS edits. I have only added more text to the <p> tag.
There is some default CSS applied for chrome packaged apps. Putting the following in your CSS should re-enable scrolling:
html {
overflow-y:scroll;
}
Someone is putting together a cool guide which might have some more tips. See https://gist.github.com/maicki/7622137#scrolling
Chrome apps have a default stylesheet applied to them, to help the web "page" be more of an "app" by default.
For Chrome Apps on Mobile, we also include this (well, a nearly identical) default stylesheet.
So that is the reason for that behavior. Scrolling is absolutely useful in very many contexts, and is absolutely supported in any DOM element by adding overflow-y: auto;.
It was simply deemed to be the wrong default for packaged apps which live inside a dedicated window of set bounds and where we encourage not having full page content overflow (very much the opposite of the web). Most apps usually surround a main scrolling element with fixed navigational elements (but not always).
FYI, there is also another open issue for Chrome Apps on Mobile to replicate yet more of the Chrome for Desktop default styles.
I am currently trying to replicate the functionality of the Sticky application (fourth example under "samples") in my GWT application, specifically NoteView (see the class NoteView in SurfaceView.java in my personal repo or download Google App Engine's SDK, where you'll find it in appengine-java-sdk-1.5.1/demos/sticky).
However, as hard as I try, I just cannot find the place where Google put in the gripper bars on the bottom right hand corner of every note, and where their code allowed the user to resize the note. grepping for "resize" and "resizable" in their sticky dir was not fruitful, and the CSS "resize" functionality was not used either. Also, GWT Textareas are not automatically resizable in the way that these notes in GWT are, and I don't know how to enable this or set it up.
I'm sorry but it really just is a textarea, and your browser does the rest (most browsers make textareas resizable nowadays).
Using Firebug or a similar developer tool, can you tell which differences are there between the Sticky sample and what your code does?
I figured it out -- it was old crud css left over from a gxt implementation. As soon as I removed the css file, the textarea automatically had gripper bars.
What can be used instead of tooltip in iphone app?
Best alternative of tooltip in touch screen systems?
Tooltips are generally reserved for operating systems that have a cursor. In touchscreen applications, tooltips should not be needed at all. When your application is in use, the user should always know where the menus are, what all of the buttons do, etc, simply because they have been labeled clearly with a text explanation or an image.
If you need the use of tooltips in your application, you need to rethink your design.
Be Succinct.
I believe tooltips are still viable in form of short timed message. For instance, you may show dialog when button can be single-clicked or long-pressed. How else would you describe to user that functionality. None of the solutions above seem to work in this case. I guess timed message, some kind of dialog and help file are only options. Or am I missing something?
You don't. Instead apply a stronger preference for text buttons over buttons with an icon. Sometimes a footer message describes the current status in more detail.
(this is just me, interpreting Apple app design as good practice)
Tooltips can be useful especially for icons or image that are not or cannot be labeled and also for multilingual apps where different text lengths must be taken into account. It's not always a question of rethinking your whole design, for me it depends on the context of your app. An design doesn't fail just because tooltips have to be added.
Safari on iPhone and iPad uses the method touch and hold on a link. This very near the actual hover and hold for desktop apps. This is also the direction we are looking at in my company.
Ref.:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Regards,
Regular HTML select boxes (such as, e.g. found here), while being "chosen" are presented by the iPhone on a native widget that seems to totally ignore regular html font sizes and whatnot. It does some ellipsing when it goes too long, but the font is way too big for a list I want to present -- even on landscape, only about 35 characters can fit.
Is there any way to tell the iPhone to use a smaller font there?
This is not possible. Use radio buttons instead.
Also, you can create custom select boxes. If created the good way, it works great. One small misstep and the UI is a disaster.