Default search text is off the grid on iPhone 6 iOS 9, and more…

[DavyParticipant]

Hi, perhaps because of the recent update from iPhone? Here’s a capture of my screen.
Language is Korean, device is iPhone 6 with the recent iOS 9 upgrade.
The text has slightly gone up, the oval shape appears when I thumb the search box,
and if there’s no text (which is the default setting) the grey area is square.

Also, when I type Korean characters, it’s hard to explain this, but think of it as Lego. In English, the word Cat = C+A+T, side by side, but in Korean C+A+T becomes one character (after the three types) similar to Chinese (three shapes make one word, kind of…) and here’s the problem. The search triggers when in the middle of the typing process, so when I try to type DREAMS (too fast or too slow), the search generates the results in the middle, and the words duplicate when I get caught in the middle… like DREEAA this is it’s hard to explain. This happens only on Firefox. iPhone and Chrome has no problem, Firefox seems to ignore the typing – i can see Chrome stopping the pre-loading animation when I keep typing. Firefox doesn’t.

Here’s also some suggestions to improve the plugin.

1) Option to change the color of the [default search text] and the actual typing text
2) Opt. to choose the shape of the X (erase) button
3) “No results!” and “Show more results” shows up at the same time, when there’s nothing to actually show more…
4) Opt. to turn off “highlight text color” but leave background highlight on (maybe this can be done with CSS, but still…)

There are problems, but to be honest it’s pretty awesome so far. Thanks for making the plugin, it helped me a lot.

Peace!

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Yes, it might be related to that, but there must be something else as well. I tried the demo sites on my iPad and iPhone, and there is no similar issue.

If you have an url to share, where I can look at this, I might be able to tell. I’m guessing it’s something with the line-height (?) or the height of the field. There is also a good chance that the theme or other plugin CSS has definitions to input fields globally and causing such problem, it’s extremely hard to tell.

The firefox issue I will try to investigate further. It should work, as it’s the browsers task to determine when a character is finished typing and to trigger the event correctly, like chrome does.

Thank you for the suggestions, here are some answers:

1. It’s adjustable, as one color only. The default text is the same color with lower opacity. You can change it on the <span class=”code”>Theme Options -> Input field layout</span> panel 🙂
2. Good idea, I might consider adding an option to that.
3. Yep, it’s a bug to be fixed
4. Well, in this case try choosing the same text color for the highlight text color as the description color. In that case it should appear as there is no change at all.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[DavyParticipant]

Hello, thanks for the reply (and sorry for my late response).

“No Results” bugs seems to be fixed, and wow… that was fast! Here’s what I have been working on, http://gotquestions.kr/sandbox (…only tested on iPhone 6, iOS9), and as you can see, [1] the text is slightly shifted up, [2] the highlighted area (to see this, hold your thumb on the search box) changes to an oval shape when there’s a text (when there’s no text = square shape) >> but maybe because of my theme as you’ve said before…

Thanks again for making this awesome plugin (especially for Knowledge Base websites), this is so far the best plugin I have ever used! 😀

Peace!

[Ernest MarcinkoKeymaster]

I think I might have a solution for the text shift. It’s the placeholder styling causing it. Most likely the theme, I’m not sure, the inspector does not show these styles unfortunately.

Try this custom CSS:

input.orig::-webkit-input-placeholder {
    line-height: 24px !important;
}

input.orig:-moz-placeholder { /* Firefox 18- */
    line-height: 24px !important;
}

input.orig::-moz-placeholder {  /* Firefox 19+ */
    line-height: 24px !important;
}

input.orig:-ms-input-placeholder {  
    line-height: 24px !important;
}

That should fix the line height issue 🙂

Thank you for your kind words!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts