I've got three items on the top of my web page. I expect them to be located left, center, and right. However, that one in the center is a bugger (partially because it's created late in the game). I've tried the auto margin tricks with no luck. I've tried relative positioning but can't get it perfectly centered (and it draws on its neighbors). In the full code below, can you get the "showInMiddle" centered? You need to click the login button for that item to show up. Ideally, the items would wrap if the page was too narrow but still maintain their alignment (rather than drawing on top of each other or all on the left).
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4>
<span id="showInMiddle" data-bind="visible: LoggedIn">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</span>
<div id="showOnRight" style="display: inline; float: right">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
You cannot center a span because it's an inline element which doesn't know its width by default.
You can simply replace span with div like this (watch the inline CSS):
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center ">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
This is quick - I am off to go home. Try adjusting the width where the login form is concerned. You need to be aware that the total of floatdiv should never exceed the total of container or it will go wrong.
<!DOCTYPE html>
<html>
<head>
<title>
This is dumb
</title>
<style>
#container {
width:900px;
margin: auto 0;
overflow: auto;
}
.floatdiv {
float:left;
margin:0;
}
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<div id="container">
<div class="floatdiv" style="font-size: 1.1em; width:200px">
I'm the title
</div>
<div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px ">
<button>
B1
</button>
<button>
B2
</button>
</div>
<div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right">
<form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>
Howdy
</span>
<input type="submit" value="Logout" />
</form>
</div>
</header>
</div>
</body>
</html>
It ends up that this works flawlessly when you use a table. Who knew?
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
<style type="text/css">
table, tr, td, h4, div { margin: 0px; padding: 0px; }
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<table style="width: 100%; border-width: 0px;">
<tr>
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td>
<td>
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
</td>
<td>
<div id="showOnRight" style="text-align: right;">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
</td>
</tr>
</table>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
Related
I am trying to validate an inline form field, with Bootstrap 4.
When validation is triggered, the inline form field jumps in width. Here is a fiddle (just click Enter without entering a value, to see the problem): https://jsfiddle.net/aq9Laaew/213418/
How can I fix this?
This is my HTML:
<form class="form-inline needs-validation" id="form-stage1" novalidate>
<label class="sr-only" for="stage1-amount">Amount in thousands</label>
<div class="input-group mb-1 mr-sm-1">
<div class="input-group-prepend"><div class="input-group-text">£</div></div>
<input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
<div class="invalid-feedback">Please enter an amount to proceed</div>
</div>
<button type="submit" class="btn btn-secondary mb-1">Enter</button>
</div>
</form>
And this is my JavaScript:
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'was-validated');
});
Try this :
var form = document.getElementById('form-stage1');
d3.select('#form-stage1').on('submit', function(e) {
d3.event.preventDefault();
d3.event.stopPropagation();
d3.select(this).attr('class', 'form-inline was-validated');
$(".invalid-feedback").show();
if (form.checkValidity() !== false) {
d3.select('#stage1-results').style('display', 'inline-block');
var val = d3.select('#stage1-amount').property("value");
d3.select('#stage1-output').text(formatPounds(val));
var percentile = getPercentile('property', val)
d3.select('#stage1-lower').text(percentile);
d3.select('#stage1-higher').text(100-percentile-1);
}
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.form-control{
width:auto!important;
flex:0!important;
}
.input-group{
width:auto!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<form class="form-inline needs-validation" id="form-stage1" novalidate>
<label class="sr-only" for="stage1-amount">Amount in thousands</label>
<div class="input-group mb-1 mr-sm-1">
<div class="input-group-prepend"><div class="input-group-text">£</div></div>
<input type="number" step="5000" min="0" class="form-control" id="stage1-amount" required>
</div>
<button type="submit" class="btn btn-secondary mb-1">Enter</button>
<div class="invalid-feedback">Please enter an amount to proceed</div>
</div>
</form>
</div>
https://jsfiddle.net/aq9Laaew/215767/
I'm trying to center a form on the screen using Materialize. I tried everything, but I can not do it for all resolutions and also be responsive. In certain resolutions it works perfect, but when you add or remove controls (), in some resolutions it looks good, in others it goes wrong. Some help? Thank you!
Code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.card {
margin: 1rem 0 1rem 0 !important;
}
.card .card-title {
background-color: #26a69a;
}
.card-title span {
display: block;
text-align: center;
padding: 5px;
}
.card-content {
padding: 30px;
}
.valign {
width: 100%;
}
.valign-wrapper {
width: 100%;
background: url("http://vunature.com/wp-content/uploads/2016/10/trees-woods-tree-nature-path-forest-landscape-amazing-pictures-of-wallpapers.jpg") no-repeat;
}
.circle {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<header class="navbar-fixed">
<nav class="top-nav">
<div class="nav-wrapper grey darken-3">
<a class="brand-logo center" href="#">Logo</a>
<ul class="right">
<li>
Register
</li>
<li>
Log in
</li>
</ul>
</div>
</nav>
</header>
<div class="valign-wrapper">
<div class="valign">
<div class="container">
<div class="card">
<div class="card-title white-text">
<span>Register</span>
</div>
<div class="card-content">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text
</p>
<form action="#" enctype="multipart/form-data" id="externalRegisterForm" method="post" novalidate="novalidate">
<div class="validation-summary-valid text-danger" data-valmsg-summary="true">
<ul>
<li style="display:none" />
</ul>
</div>
<div>
<section style="position: absolute; left: 50%; transform: translateX(-50%); display: none;">
<input type="submit" class="btn" value="Sign In">
<input type="submit" class="btn" value="x">
</section>
<img class="circle" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" width="128" height="128" alt="">
</div>
<div class="row">
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre de usuario es obligatorio." id="UserName" name="UserName" type="text" />
<label for="UserName" class="active">Username</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre(s) es obligatorio." id="Name" name="Name" type="text" />
<label for="Name" class="active">Name</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Apellido(s) es obligatorio." id="LastName" name="LastName" type="text" />
<label for="LastName" class="active">Last name</label>
</div>
<div class="input-field col s12">
<input class="validate" data-val="true" data-val-required="El campo Email es obligatorio." id="Email" name="Email" type="text" />
<label for="Email" class="active">Email</label>
</div>
</div>
</form>
</div>
<div class="card-action">
<input type="submit" class="btn" value="Sign In" form="externalRegisterForm" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<script type="text/javascript">
$(function() {
$('.button-collapse').sideNav();
});
</script>
</body>
</html>
EDIT
https://image.ibb.co/h7ESBk/1.jpg
See the white line below. It is a resolution of 1366x768. If you add more input, it looks "normal" and responsive. But if you delete an input you can see how the white background is larger.
Based on the feedback you gave in the comments, I think all you need is to add min-height: calc(100vh - 64px); to .valign-wrapper.
That will fill the whole page. You may have to modify the background property as well to make sure the image fills up the whole element, I couldn't load the image so I couldn't test that. The vertical alignment is already working.
Before:
After:
These UI libraries have been offering a 'grid' solution to this for some time now. However, I find vanilla CSS flexbox (whether hard coded or scripted with JS in the browser) to be super easy for centering both ways.
As for breakpoints, you will need them. I went thru all this on this here project https://github.com/rhroyston/firebase-v4-auth. Feel free to copy& paste as you need. Snippet below.
//ON LOAD INITIALLY ASSUME PHONE
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (width >= 840) {
//IT'S A DESKTOP
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
else if (width >= 480) {
//IT'S A TABLET
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
}
//ON RESIZE INITIALLY ASSUME PHONE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
// assuming device is a phone
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (window.innerWidth >= 840) {
//device is a desktop
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
else if (window.innerWidth >= 480) {
//device is a tablet
doc.getElementById("title").style.display = "none";
doc.getElementById("title-right").style.display = "flex";
}
}
function resizeThrottler() {
// ignore resize events as long as an actualResizeHandler execution is in the queue
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
// The actualResizeHandler will execute at a rate of 15fps
}, 66);
}
}
Hi everyone , I'm working on angularjs which preforms a form filling with validation ,after the submission the data goes into the table . I have an option to edit it . To edit i have used bootstrap modal to edit . Everything is going fine in plunker but the problem is , when i try to run the same code in local browser it is not working . Please help me with it
Let me show you the code :
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Tables with Borders</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
<script src="controller/listCtrl.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<style type="text/css">
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div ng-app="app" ng-controller="CustomerController">
<div class="main-content">
<!-- You only need this form and the form-basic.css -->
<form name="exampleForm" class="elegant-aero" ng-submit="addNew(personalDetails); form.$setPristine()">
<label>Name:</label>
<input type="text" name="userFirstName" ng-model="personalDetails.name" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="personalDetails.email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="text" name="userPhoneNumber" ng-model="personalDetails.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<label>User Address:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="personalDetails.address" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 10 characters</div>
<div ng-message="maxlength">Message must not exceed 100 characters</div>
</div>
<br>
<div class="form-row">
<button type="submit" class="btn btn-primary" ng-click="submit()">Submit Form</button>
</div>
</form>
</div>
<div>
<div class="row" ng-hide="!personalDetails.length">
<div class="bs-example">
<table id="example" class="table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name
</th>
<th>Email
</th>
<th>Phone Number
</th>
<th>Address
</th>
<th>Editing
</th>
<th>Delete
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>{{personalDetail.name}}</td>
<td>{{personalDetail.email}}</td>
<td>{{personalDetail.phone}}</td>
<td>{{personalDetail.address}}</td>
<td>
<button class="btn btn-default" ng-click="open(personalDetail)">Edit {{ personalDetail.name }}</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ personalDetail.name }}</h3>
</div>
<div class="model-body">
This is where the Customer Details Goes
<br />
<form name="exampleForm" class="elegant-aero" ng-submit="addNew(customer); form.$setPristine()">
<label>Name:</label>
<input type="text" name="userFirstName" ng-model="customer.name" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="customer.email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="text" name="userPhoneNumber" ng-model="customer.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<label>User Address:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="customer.address" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 10 characters</div>
<div ng-message="maxlength">Message must not exceed 100 characters</div>
</div>
<br>
<div class="form-row">
<button class="btn btn-primary" ng-click="ok(personalDetail)">Update Customer</button>
</div>
</form>
</div>
</script>
</td>
<td>
<input type="button" class="btn btn-danger pull-right" data-ng-click="remove(personalDetail.name)" value="Remove">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
script.js
var app = angular.module('app', ['ui.bootstrap', 'ngMessages']);
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
var taskData = localStorage['tasksList'];
if (taskData !== undefined) {
$scope.personalDetails = JSON.parse(taskData);
}
$scope.personalDetails = [{
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}, {
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}, {
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}];
$scope.addNew = function(personalDetails) {
$scope.personalDetails.push({
'name': personalDetails.name,
'email': personalDetails.email,
'phone': personalDetails.phone,
'address': personalDetails.address,
});
$scope.PD = {};
localStorage['tasksList'] = JSON.stringify($scope.personalDetails);
$scope.personalDetails = angular.copy($scope.personalDetails);
};
$scope.remove = function(name) {
var index = -1;
var comArr = eval($scope.personalDetails);
for (var i = 0; i < comArr.length; i++) {
if (comArr[i].name === name) {
index = i;
break;
}
}
if (index === -1) {
alert("Something gone wrong");
}
$scope.personalDetails.splice(index, 1);
};
// MODAL WINDOW
$scope.open = function(customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function() {
return customer;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
$scope.customer = customer;
$scope.ok = function(customer) {
$modalInstance.close($scope.customer);
};
});
//]]>
style.css
/*
Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
*/
.elegant-aero {
margin-left:auto;
margin-right:auto;
margin-top: 25px;
max-width: 600px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
color: #888;
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 60%;
}
.elegant-aero div {
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
And let me show you my plunker which works fine :https://plnkr.co/edit/zHzQU09RI6bKcDtC8bzy?p=preview
Please help me with this . It will be grateful if somebody help me with this .
There are some references which won't load when you run it on your machine, change them as below,
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="sample.js"></script>
My page is divided in 3 parts and i have used flex box model for the layout. First part is top-panel.jsp which i have included explicitly in every page of my website. second part is left body and third is right body which i divided using the concept of "div" and flex but now i want to bring the left-body div and right-body div into a single div but it is not working on my page.
The code is:
<%# include file="top-panel.jsp" %>
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer" />
<input type="hidden" name="refNum" value="${next.key}"> ${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>Application under review</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer" /> ${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p>
<h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p>
<h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
When i add the whole code of left body and right body in a single div, The layout completely goes away. If someonecan help me resolve it. it would be great.
The css of left body and right body is:
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
}
.right_body {
position: relative;
/* display:block; */
width: 29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
}
.right-box {
margin-top: 48px;
border: thin solid #BDBDBD;
border-radius: 5px;
}
You needs to use float and clearfix class. please see the demo.
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
float: left;
}
.right_body {
position: relative;
display: block;
width: 29%;
float: left;
}
.clearfix:after{
content: " ";
display: table;
}
.clearfix:before{
content: " ";
display: table;
}
.clearfix{
clear: both;
}
<div class="main clearfix">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
<div>
Try this in place of your stylesheet.
.left_body{
position:relative;
width:69%;
margin-top:1px;
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right_body{
position:relative;
/* display:block; */
width:29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
}
.main_body{
width: 100%;
height: 100%;
}
and your code should be like this :-
<body>
<div class="main_body">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
</div>
</body>
If you completely want to remove the left_body and right_body tags from your page just remove them and try this :-
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
width: 29%;
}
.form_area{
width: 69%;
}
Sorry if this is such a basic question, but how do I left align two text box elements in different divs with labels that are different lengths? I have a screen shot below. I want to align the textbox for "Dive Profile Id" and "Dive Profile Name". The way I have it now, is the "Dive Profile Id" and "Description" labels and textbox are in one div and the "Dive Profile Name" is in another div. How would I align these two input elements?
Here is my actual HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<LINK href="dive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline">
<label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
the easy way is to transform your label into inline blocks and giving them the same size
with something like this :
<label class="label" for="profileId"...
<label class="label" for="profileName" ...
and the CSS, for example:
.label {
display: inline-box;
width: 100px;
}
so if you want the style in your html :
<div id="topline">
<label for="profileId" style="display:inline-box;width:100px;">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="display:inline-box;width:100px;">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<LINK href="dive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline">
<label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<br />
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px; ">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
Include bootstrap.css
<html>
<head>
<title></title>
<!--INCLUDE BOOTSTRAP.CSS--->
<!-- <LINK href="dive.css" rel="stylesheet" type="text/css"> -->
<style>
label {
display: inline!important;
}
</style>
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline" class="span8 control-group">
<label for="profileId" class="control-label">Dive Profile Id </label>
<input type="text" name="profileId" id="profileId" class="controls">
<label for="descriptionTxtArea" class="control-label">Description</label>
<textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea" class="controls"></textarea>
</div>
<div class="clearfix"></div>
<div id="secondline " class="control-group">
<label for="profileName" class="control-label" >Dive Profile Name</label>
<input type="text" name="profileName" id="profileName" class="controls">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>