2017-07-18 76 views
0

角材料/ CSS的輸入過其他分區去跑步

.lat-long-divider{ 
 
    width:100px; 
 
} 
 
.lat-long-spacer{ 
 
    margin-right: 3px; 
 
}
  <div class="ng-animate-disabled" layout flex> 
 
          <div layout > 
 
           <strong translate="LABELS.LAT" class="lat-long-spacer"></strong><strong class="lat-long-spacer">:</strong> 
 
         <inline-edit class="lat-long-divider" identifier="'measurement-data'" value="$ctrl.asset" display="$ctrl.asset.latitude" value-name="' Latitude'" on-update="$ctrl.updateLat"></inline-edit> 
 

 
          </div> 
 
          <div layout> 
 
           <strong translate="LABELS.LONG" class="lat-long-spacer"></strong></strong><strong class="lat-long-spacer">:</strong> 
 
          <inline-edit class="lat-long-divider" identifier="'measurement-data'" value="$ctrl.asset" display="$ctrl.asset.longitude" value-name="' Longitude'" on-update="$ctrl.updateLong"></inline-edit> 
 
          </div> 
 
        </div>

enter image description here

我使用角度材料和佈局行方法,以便既緯度和經度將某一行上,我使用一些基本的CSS來保持它們分離。問題是,根據api數據,有時經緯度數據有全小數或無小數。將小數舍入不是該要求的一個選項。如果我之間使用較長的空間,那麼當緯度較長的數據位數較少時,它們之間的空間仍然很大。那麼我該如何動態地做到這一點呢?使用CSS或角度材質。基本上,如果我可以包含的數據內的每個其父股利或通過一些彎曲方法

+0

snippet沒有運行,可以喲做小提琴嗎?順便說一句,我認爲你的問題只是字斷css屬性 – Alburkerk

回答

0

.longName { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
} 
 
#inline-edit-measurement-data{ 
 
    width:100px 
 
}
<div ng-if="$ctrl.identifier == 'measurement-data' && $ctrl.isEditing" > 
 
     <md-input-container> 
 
      <input type="number" aria-label="inline editor" id="inline-input-box" ng-model="$ctrl.display" ng-blur="$ctrl.focusOut()"> 
 
     <md-input-container flex> 
 
      <input id="inline-edit-measurement-data" type="number" aria-label="inline editor" id="inline-input-box" ng-model="$ctrl.display" ng-blur="$ctrl.focusOut()"> 
 
     </md-input-container> 
 
    </div>

幾乎除去CSS動態地創建空間,並給寬度爲聯編輯分量i有