List's items lose alignment when changing the screen rotation

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.

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

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.

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.

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;

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

1 Like