Change css style on change orientation


#1

Hello everyone!

Can anyone suggest please, how to change css style in document, when devise change orientation ?


#2

Take a look at CSS Media Queries. This tutorial has a bunch of common scenarios: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/


#3

joshmorony, good day! About CSS Media Queries it is clear, but I want to change [style.margin-top.px] dynamically, with computing a width and height on javascript. I think CSS Media Queries dose not help me on this. My code was working good on RC3, but now not working … I do not understand what happened …


#4

What does your code look like? Binding to the style property like that should also work.


#5

Example of code.

@Component({
selector: ‘content-page’,
templateUrl: ‘ContentPage.html’,
host: {
’(window:resize)’: ‘changeOrientation($event)’
}
})

changeOrientation($event) {
this.redraw();
}

redraw() {

let schematic = document.getElementById(“schematic”) as HTMLImageElement;

let hg =schematic.naturalHeight;
let wd =schematic.naturalWidth;
let w = schematic.clientWidth;
let h = schematic.clientHeight;
this.scaleW = w/wd;
this.scaleH = h/hg;
}
}

html

  <div *ngIf="(contentItem.nodeType=='Schematic')">
    <ion-scroll class="ion-scroll_content_page" [zoom]="true" maxZoom="20" scrollX="true" scrollY="true">
      <div id="HotSpotContainer">
        <span class="hotSpotDot" *ngFor="let item of HotSpotList;let i = index;" (click)="HotSpotClick(item.type)"
              [style.margin-top.px]="(item.top*scaleH)-5" [style.margin-left.px]="(item.left*scaleW)-5"
              [style.width.px]="(item.width*scaleW)+10" [style.height.px]="(item.height*scaleH)+10"></span>
        <img id="schematic" class="image_content_page" [src]="data_path">
      </div>
    </ion-scroll>
  </div>

#6

Only thing that is jumping out to me is that margin-left should be in camel case when being accessed like that, so [style.marginLeft.px] instead.


#7

joshmorony, I tried, it’s don’t matter. Redrawing spans doing after any other event (something like click, but not programmatically called). I see in chrome dev tools, that when I change orientation , all needable methods is caused, but style="margin-top: in html dose not change …


#8

Could be a zone issue, you can use the following method to force the update to run inside of Angular’s zone:

changeOrientation($event) {

	this.zone.run(() => {

		this.redraw();

	});

}

You will also need to import NgZone from @angular/core, and inject it into your constructor as zone.


#9

joshmorony, it just fantastic, everything works correctly. Thank you so much !


#10

joshmorony, I see on your website topic where you check network with Network from ‘ionic-native’. Is it possible, that now Network.connection always return undefined ? I want to check connection, but now my function dose not working.

  public static isOnline():boolean {
    return Network.connection !== Connection.NONE;
  }

Upd. Problem solved!


#11

joshmorony,good day ! Could you suggest please… is it possible in component “Loading” send progress of file-transfer in real time ?