<button> aligned with <fieldset>

Question

Good day,

I am trying to align <button> relative to <fieldset> , but up to this moment I only managed to align it with margin:0 auto;

May you say if it is possible to put <button> outside the <fieldset> on the center of the right side border, like in picture below.

Many thanks for all suggestions.

 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); }; });

 /* app css stylesheet */ 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="angularjs@1.4" 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/xxx/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>

Answer 1

Place the button after the text area

Apply cs styling like this

textarea {
  border: 2px solid #9C9C9C;
  display: inline-block;
  margin: auto;
  position: relative;
  vertical-align: middle;
}

button {
  display: inline-block !important;
}

fieldset {
  text-align: center;
}

Snippet below

 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); }; });

 /* app css stylesheet */ textarea { border: 2px solid #9C9C9C; display: inline-block; margin: auto; position: relative; vertical-align: middle; } button { display: inline-block !important; } fieldset { text-align: center; } 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; }

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!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="angularjs@1.4" 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/xxx/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"> <textarea class="input" rows="2" cols="30" placeholder="Describe User" ng-model=" choiceSet.choices[$index]"></textarea> <button type="button" class="btn-btn-default-btn-sm" ng-click="removeChoice($index)">X</button></br> </fieldset> </div> </div> </body> </html>

<button> aligned with <fieldset>

Question

1 answers

solution1
0 ACCPTED 2017-04-09 20:34:36

<button> aligned with <fieldset>

Question

1 answers

solution1 0 ACCPTED 2017-04-09 20:34:36

solution1
0 ACCPTED 2017-04-09 20:34:36