CSSスタイルの位置付けの問題

ディレクティブを作成して入力フィールドをクリアしました。 "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クラスを変更し

：inputタグとして

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

出典

2016-08-25 10:53:07

あなたは要素を検査やってコードをチェックすると、私はすでにそれを包みました。しかし、spanタグを使用し、divタグを使用しないでください。私はすでにdivに置き換えてチェックしましたが、うまくいきませんでした – Aparna

@Aparnaもう一度答えを確認してください。あなたはあなたの質問をもっと説明しなければなりません！それは働いている。 –

CSSでうまくいかないどのように助けてくれてありがとう。 – Aparna

はコンテナタグではありません、あなたはdivの中にinputタグと終了タグをラップする必要があります。

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スタイルの位置付けの問題

答えて

関連する問題