List's items lose alignment when changing the screen rotation

Ionic Framework ionic-v3
1

I’d like to diplay a list of cities with selection’s indicator at left on item’s buttons. I need really to show continuously the select UI at left, but the text can be truncated.
The error is when I rotates from landscape (picture #1) to portrait and I get the picture #2 : the content seems to bee centerd rather to aligned at left. Moreover, if I rotates again landscape and again portrait I get the same result.

lndscp

prtrt

There is the template’s extract :

<ion-list no-lines >
	<ion-item style="width:600px"  style="text-align:left;align-self:left;align-items:left;align-content:left"  [style.width]="ionItem_width" *ngFor="let f of favorites" no-lines>
		<button ion-button color="light_textCol" style="text-align:left;align-self:left;align-items:left;align-content:left;width:100%;  "  (click)="setItemAsDefault(f.id)">
		<i item-left (ionClick)="setItemAsDefault(f.id)" *ngIf="f.isDefaultCity"  style="font-size: 2em" class="fa fa-check-square-o" aria-hidden="true"></i>
		<i item-left (ionClick)="setItemAsDefault(f.id)" *ngIf="!f.isDefaultCity"  style="font-size: 2em"class="fa fa-square-o" aria-hidden="true"></i>  
		<span style="font-size: 2em">{{f.cityName}}</span>
	</ion-item>
</ion-list>

NB : The select UI is an awesomeFont UI in a markup, which is alternativaly selected or not selected according to f.isDefaultCity.

2

Up : Anybody knows how to auto align the ion-button’s text when changing the screen rotation ?

3

I’ve found one hack for you.

First of all give id to your button.
<button ion-button id="button_id" color="light_textCol" style="width:100%; " (click)="setItemAsDefault(f.id)">

Then in your ts file.
You can check if your orientation has changed or not using this plugin: http://ionicframework.com/docs/native/screen-orientation/

If changed, add following code according to landscape or portrait.

    var tempButton = document.getElementById("button_id"); 
    var buttonText = tempButton.getElementsByClassName("button-inner")[0]; 
    buttonText.style.justifyContent = "left"; //change this value according to landscape and portrait
   //Maybe you can use value "center" for landscape and "left" for portrait

Make sure you execute this code after page has loaded.

*This solution may change when ionic gets updated.

4

I got this console error :

[13:28:05] typescript: …ers/Gardien/Documents/Apache www/Projets Ionic
/SWMG/src/pages/favoris/favoris.ts, line: 366
Property ‘style’ does not exist on type ‘Element’.

Does it come from the unvalid type of buttonText ?.. I’m working only on typescript not javascript.

5

Just add this to your declarations.d.ts.

interface Element{
  style: any;
}

Or you can just modify the above code like this:
var buttonText = tempButton.getElementsByClassName("button-inner")[0] as HTMLElement;

6

That’s all folk : it works with that :wink:

1 Like