sábado, 30 de setembro de 2017

CSS Margin does not work equal in all browsers in some cases

I normally use firefox for development, and in a recent issue I used margin-top and ok but in safari and Google Chrome I not get the same layout. Normally margin works fine in all browsers.

I did not find the pattern for this situation but the solution is use the equivalent to margin attribute used. In my case margin-top and -webkit-margin-before was used to compensate the difference.


sexta-feira, 29 de setembro de 2017

sexta-feira, 22 de setembro de 2017

Focus and move cursor in Angular

HTML5 brings the autofocus attribute to the input tag.
This attribute works fine when the page is loaded the first time, but in some moments is necessary put the focus in runtime, e.g. after a validation.

In AngularJS I use the code below (unfortunately I did not save the link from where I copied it to thank):

function cursorToEnd(input) {
    input.focus();

    // If this function exists...
    if (input.setSelectionRange) {
        // ... then use it (Doesn't work in IE)
        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(input).val().length * 2;

        input.setSelectionRange(len, len);
    } else {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(input).val($(input).val());
    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    input.scrollTop = 999999;        
}

function focus(jQueryObject) {
    setTimeout(function() {
        cursorToEnd(jQueryObject);
    }, 500);
};

In my apps using Angular 4 I rewrite it to:

  cursorToEnd(input: ElementRef) {
    input.nativeElement.focus();

    if (input.nativeElement.setSelectionRange) {
      const len = input.nativeElement.value.length * 2;
      input.nativeElement.setSelectionRange(len, len);
    }

    input.nativeElement.scrollTop = 999999;
  }

  focus(input: ElementRef) {
      setTimeout(() => this.cursorToEnd(input), 300);
  }


Fast tip: App builded with Angular 4 does not works with Internet Explorer

This is because you need to import js files additional.
To work, check the polyfills.ts file and uncomment the required lines.