Friday, April 18, 2014

Border around inputs

Working on my project, I had problems with Chrome presentation of some elements. It creates border automatically around many elements. I had to find a cure for the problem. The answer is in such a good article. It works and removes border around elements in Chrome and Safari.

Tuesday, April 15, 2014

Disabled Tooltip

My last project runs on Bootstrap-Knockout platform.  I'm learning a lot about presenting elements in this environment. One of the major problem is to hide tooltip for Mobile views.
I searched the Internet and did not find a lot of information about such problem. One of the articles was particularly good, but I still have to find my original solution. My code disables the tooltip for Mobile users and save button functionality.
Here's what I did.

HTML:
<button class="btn btn-default btn-primary" type="button" data-bind="text: RequiresConfig == true ? 'Create' : 'Add to Cart',tooltip: { title: RequiresConfig == true ? 'Create' : 'Add to Cart', placement: 'bottom', disable: false }"></button>

Javascript/jQuery (accompanies HTML).
<script type='text/javascript'>
        jQuery(function ($) {
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                ko.bindingHandlers.tooltip = {
                    options: {
                        disable: true
                    }
                };
                ko.applyBindings({});
            }
        });
    </script>

Friday, April 11, 2014

It's not a bug!

This time QA was right. They discovered some differences in landscape and portrait views in iPhone. It's only Safari and only iPhone does this. It re-sizes the font and images going from portrait to landscape. It's not a bug, it's a iPhone feature. To fix the issue, I found an article and patched my code. Very simple line of code fixes the feature.

html {-webkit-text-size-adjust: auto;}

It was a very good learning experience for me.