Good morning,
I have been attempting to align the <button> element relative to the <fieldset>, but so far, I've only been able to center it using margin:0 auto;.
Is it possible to position the <button> outside the <fieldset> in the center of the right side border, as shown in the image below?
Thank you in advance for any suggestions.
https://i.sstatic.net/nd3dJ.png
var app=angular.module('myApp',[]);
app.controller('inspectionController', function ($scope, $http) {
$scope.choiceSet = {choices: []};
$scope.quest = {};
$scope.choiceSet.choices = [];
$scope.addNewChoice = function () {
$scope.choiceSet.choices.push('');
};
$scope.removeChoice = function (z) {
var lastItem = $scope.choiceSet.choices.length - 1;
$scope.choiceSet.choices.splice(z,1);
};
});/* Custom CSS */
textarea {
border:2px solid #9C9C9C;
display: block;
margin:auto;
position:relative;
}
textarea:focus {
outline: none !important;
border-color: #719ECE;
box-shadow: 0 0 10px #719ECE;
border:2px solid #00C4B0;
}
.btn-btn-info {
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 9px;
font-family: Arial;
color: #ffffff;
font-size: 15px;
background: #2be632;
padding: 8px 12px 8px 12px;
text-decoration: none;
display:table;
margin: 0 auto;
}
.btn-btn-info:hover {
background: #74f278;
text-decoration: none;
}
.btn-btn-default-btn-sm {
-webkit-border-radius: 9;
-moz-border-radius: 9;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
background: #e62b2b;
padding: 3px 6px 3px 6px;
text-decoration: none;
display:table;
margin:0 auto;
}
.btn-btn-default-btn-sm:hover {
background: #e87474;
text-decoration: none;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Front-end developer task</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3958575e4c55584b534a7908170d">[email protected]</a>" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="inspectionController">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</br>
<div class="col-sm-10">
<input type="button" class="btn-btn-info" ng-click="addNewChoice()" value="ADD USER"></br>
<div class="col-sm-4">
<fieldset data-ng-repeat="field in choiceSet.choices track by $index">
<button type="button" class="btn-btn-default-btn-sm" ng-click="removeChoice($index)">X</button>
<textarea class="input" rows="2" cols="30" placeholder="Describe User" ng-model=" choiceSet.choices[$index]"></textarea> </br>
</fieldset>
</div>
</div>
</body>
</html>