2016-08-17 8 views
0

私が最初に構造イオン含有量の位置を動的に変更する方法は?出来ますか?

<ion-view> 
    <ion-header-bar class="bar-subheader"> 
    </ion-header-bar> 

    <ion-content class="has-header has-subheader has-footer"> 
    </ion-content> 

    <ion-footer-bar> 
    </ion-footer-bar> 
</ion-view> 

を参照して、問題を得た私はいくつかの広いデバイスが1行を示して、それが表示されることができるように、いくつかの他のデバイスが複数行することができ、ion-header-barのテキストの動的な長さを配置します。私の問題はion-contentです。その後の位置は常にionic cssファイルに従って固定され、barクラスのサイズは常に44pxです。 ion-content'has-header has-subheader'クラスがある場合、そのCSSでは、'top:44px;'または'top:88px;'のハードコードされた高さだけを使用します。

私の実際の質問は、どのように動的にイオン含有量の位置を調整するのですか?

Iは、しかし、値はリアルタイムバインドされないが、私のサブヘッダの現在の高さを取得するためにdocument.querySelectorng-styleを使用しようとしているヘッダが複数の行にあるため、あまりにも多くのテキストの拡大されたときに、角度コントローラでdocument.querySelectorであります正しく更新されません。

これを更新できるionic 2.0コードにはresize()関数がありますが、私のコードは現在ionic 1.xで行われていますので、ここでは1.xの解決策を探しています。

答えて

0

このwhy don't add separated div?に触発ありがとう、私はちょうど1つの愚かなシンプルな解像度でそれを考え出したと思います。

テンプレート内のion-header-barを削除し、ion-contentのdivを使用するだけで、イオンコードの固定された高さにあるため、デフォルトのヘッダーを使用しないようにしました。それから、DOMクエリを使用する必要はありません。すべてのdivがうまく配置されています。ちょうど1つの問題、ion-nav-barの高さはまだ固定されていますが、それは盛り付けで調整することができます。

<ion-content class="has-header has-footer"> 
    <div class="myheader> 
    </div> 
    <div class="other-stuff"> 
    </div> 
</ion-content> 

<ion-footer-bar> 
</ion-footer-bar> 

関連する問題