CSS樣式定位問題

我已經創建了一個AngularJs指令來清除輸入字段。我想將「close」圖標放置在相應的輸入元素中。但它走出了輸入領域。CSS樣式定位問題

這裏是plnkr - https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview

Note:請通過調整它檢查plnkr預覽。

2016-08-25 Aparna

var app = angular.module("myApp", []); 
 

 
app.controller("MyController", function($scope) { 
 
    $scope.fname = "Hello!!" 
 
    $scope.lname = "World"; 
 
}) 
 
.directive('clearField', function($compile) { 
 
\t return { 
 
\t restrict: 'A', 
 
\t scope: { 
 
\t  model: '=ngModel' 
 
\t }, 
 
\t link: function(scope, element, attr) { 
 
\t  // Add wrapper to the element 
 
\t  scope.model = (scope.model == undefined) ? "" : scope.model; 
 

 
\t  element.wrap('<span class="wrapper"></span>') 
 
\t  .addClass('pr14') 
 
\t  .after('<span class="clear">×</span>'); 
 

 
\t  var clearInputElement = angular.element(element.next()); 
 

 
\t  clearInputElement.bind('click', function() { 
 
\t  scope.$apply(scope.model = ""); 
 
\t  }); 
 

 
\t  scope.$watch('model', function() { 
 
\t  if (scope.model.length > 0) { 
 
\t   clearInputElement.css("visibility", "visible"); 
 
\t  } else { 
 
\t   clearInputElement.css("visibility", "hidden"); 
 
\t  } 
 
\t  }); 
 
\t } 
 
\t } 
 
});

.wrapper { 
 
    position: relative; 
 
    display: inline-block 
 
} 
 

 
.pr14 { 
 
    padding-right: 17px; 
 
} 
 

 
.clear { 
 
    position: absolute; 
 
    right: 7px; 
 
    color: grey; 
 
    font-size: 17px; 
 
} 
 

 
.clear:hover { 
 
    cursor: pointer; 
 
    color: blue; 
 
}

<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body ng-controller="MyController"> 
 
    <label>Name: </label> 
 
    <input type="text" ng-model="fname" clear-field> 
 
    <textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea> 
 
</body> 
 

 
</html>

來源

2016-08-25 11:05:32

更改.wrapper類是這樣的：

.wrapper { 
    position: relative; 
    display: inline-block; 
}

來源

2016-08-25 10:53:07

如果檢查通過做檢查元素的代碼，我已經沒有把它包。但使用span標籤，不使用div標籤。我已經檢查了用div替換，但沒有工作 – Aparna

@Aparna請再次檢查答案。你必須更多地解釋你的問題！它正在工作。 –

對CSS不太好。任何方式感謝您的幫助。 – Aparna

由於輸入標籤不是容器標記，你需要用輸入標籤和結束標記在一個div。

var app = angular.module("myApp", []); 
 

 
app.controller("MyController", function($scope) { 
 
    $scope.fname = "Hello!!" 
 
    $scope.lname = "World"; 
 
}) 
 
.directive('clearField', function($compile) { 
 
\t return { 
 
\t restrict: 'A', 
 
\t scope: { 
 
\t  model: '=ngModel' 
 
\t }, 
 
\t link: function(scope, element, attr) { 
 
\t  // Add wrapper to the element 
 
\t  scope.model = (scope.model == undefined) ? "" : scope.model; 
 

 
\t  element.wrap('<span class="wrapper"></span>') 
 
\t  .addClass('pr14') 
 
\t  .after('<span class="clear">×</span>'); 
 

 
\t  var clearInputElement = angular.element(element.next()); 
 

 
\t  clearInputElement.bind('click', function() { 
 
\t  scope.$apply(scope.model = ""); 
 
\t  }); 
 

 
\t  scope.$watch('model', function() { 
 
\t  if (scope.model.length > 0) { 
 
\t   clearInputElement.css("visibility", "visible"); 
 
\t  } else { 
 
\t   clearInputElement.css("visibility", "hidden"); 
 
\t  } 
 
\t  }); 
 
\t } 
 
\t } 
 
});

.wrapper { 
 
    position: relative; 
 
} 
 

 
.pr14 { 
 
    padding-right: 17px; 
 
} 
 

 
.clear { 
 
    position: absolute; 
 
    right: 7px; 
 
    color: grey; 
 
    font-size: 17px; 
 
} 
 

 
.clear:hover { 
 
    cursor: pointer; 
 
    color: blue; 
 
} 
 
.wrap{position:relative;}

<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 
<body ng-controller="MyController"> 
 
    <div class="wrap"> 
 
    <label>Name: </label> 
 
    <input type="text" ng-model="fname" clear-field> 
 
    </div> 
 
    <br> 
 
    <div class="wrap"> 
 
    <textarea ng-model="lname" id="" cols="30" rows="10" clear-field></textarea> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-25 10:59:56

CSS樣式定位問題

回答

相關問題