Hello everyone!
Can anyone suggest please, how to change css style in document, when devise change orientation ?
Hello everyone!
Can anyone suggest please, how to change css style in document, when devise change orientation ?
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/
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 …
What does your code look like? Binding to the style property like that should also work.
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>
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.
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 …
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
.
joshmorony, it just fantastic, everything works correctly. Thank you so much !
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!
joshmorony,good day ! Could you suggest please… is it possible in component “Loading” send progress of file-transfer in real time ?