Question

我想在走小屏幕时让纬度和经度以列格式低于datakey。我玩材料设计xs并且不适合我。下面我有代码，现在我隐藏了lat，很长一段时间，因为他们正在切断iPhone-5屏幕尺寸

div layout layout-align="space-between center">
                    <div class="md-inline-edit-input " class="dkey-inline">
                        <strong id="dkey-label">Data Key:</strong>
                        <inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
                    </div>


                    <div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout layout-align="space-between center">
                        <div style="padding-right:15px;"><strong class="lat-long-label">{{'LABELS.LAT'|translate}}:</strong><span>{{$ctrl.asset.latitude}}</span></div>
                        <div><strong class="lat-long-label">{{'LABELS.LONG'|translate}}:</strong><span>{{$ctrl.asset.longitude}}</span></div>
                    </div>

Answer 1

＆＃13;

       <div layout layout-xs="column" layout-align='space-between center' layout-align-xs='center start'>
                <div  class="md-inline-edit-input " class="dkey-inline">
                    <strong id="dkey-label">Data Key</strong>
                    <inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
                </div>
       
                <div>
                    <div  ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout>
                            <span layout layout-padding>
                                <strong translate="LABELS.LAT"></strong>
                                <label>{{$ctrl.asset.latitude | number: 2}}</label>
                            </span>
                            <span layout layout-padding>
                                <strong translate="LABELS.LONG"></strong>
                                <label>{{$ctrl.asset.longitude | number: 2}}</label>
                            </span>
                    </div>


                    <div ng-if="!$ctrl.asset.latitude || !$ctrl.asset.longitude" class="ng-animate-disabled">
                        <label>No Location Information Available</label>
                    </div>
                </div>


            </div>

＆＃13;

必须使用材料中断重写整个部分。

角度材料设计 - 小屏幕时的柔性包装

1 个答案: