How can I move the red - button to be up next to the top of the control?
The HTML looks like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<select size="10" class="form-control" id="assigned-tenants" name="assignedTenants">
<option value="1">fdsaf</option>
</select>
<button ata-toggle="tooltip" title="Add" class="btn btn-danger">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
You will have to use the bootstrap class pull-left to your first element in that column which is select box.
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<div class="col-md-10 pull-left" style="padding-right:0px">
<select size="10" class="form-control" id="assigned-tenants" name="assignedTenants" class="pull-left">
<option value="1">fdsaf</option>
</select>
</div>
<div class="col-md-2 pull-left" style="padding-left:0px">
<button ata-toggle="tooltip" title="Add" class="btn btn-danger pull-left">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
Use vertical-align:top; in the css for that button.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<select size="10" id="assigned-tenants" name="assignedTenants">
<option value="1">fdsaf</option>
</select>
<button ata-toggle="tooltip" title="Add" class="btn btn-danger" style="vertical-align:top;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
Related
I have tried multiple solutions but I was not able to achieve what I'm trying to achieve.
I've build a php file that controls different components on a raspberry pi. Therefore I have 4 rows of buttons that I would like to center in the middle of the screen as a responsive design, no matter what the resolution is (xl,lg,md,sm).
The code so far is:
<!DOCTYPE html>
<html lang='us'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
<meta name='viewport' content='width=device-width' />
<style>
.input-group-button {
padding: 0;
border:none;
background: none;
}
.input-group .input-group-button:first-child .btn{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.input-group select.form-control{
-webkit-appearance: none;
}
</style>
</head>
<body>
<form class='justify-content-center' method='post' action='../index.php'>
<div class='row justify-content-center form-group'>
<div class='col-xl-2 col-lg-2 col-md-2 col-sm-2 text-center'>
<div class='input-group'>
<select name='2812efct' id='2812efct' class='form-control'>
<option selected>Select Effects</option>
<option value='0'>All Effects</option>
<option value='1'>Effect 1</option>
<option value='2'>Effect 2</option>
<option value='3'>Effect 3</option>
</select>
<div class='input-group-addon input-group-button'>
<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
</div>
</div>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group col-xl-1 col-lg-1 col-md-1 col-sm-1 text-center' role='group'>
<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
</div>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>
The Buttons seem to be somehow in the center but left aligned and if the screen goes smaller the buttons are going to stick on the left hand side.
I'm not sure I fully understand what yuo wanr, but maybe just remove col-xl-2 col-lg-2 col-md-2 col-sm-2 from everywhere.
.input-group-button {
padding: 0;
border:none;
background: none;
}
.input-group .input-group-button:first-child .btn{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.input-group select.form-control{
-webkit-appearance: none;
}
<!DOCTYPE html>
<html lang='us'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO' crossorigin='anonymous'>
<meta name='viewport' content='width=device-width' />
</head>
<body>
<form class='justify-content-center' method='post' action='../index.php'>
<div class='row justify-content-center form-group'>
<div class='text-center'>
<div class='input-group'>
<select name='2812efct' id='2812efct' class='form-control'>
<option selected>Select Effects</option>
<option value='0'>All Effects</option>
<option value='1'>Effect 1</option>
<option value='2'>Effect 2</option>
<option value='3'>Effect 3</option>
</select>
<div class='input-group-addon input-group-button'>
<button type='submit' class='btn btn-secondary' value='2812Effect' name='2812Effect'>Set Effect</button>
</div>
</div>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='up' name='up'>Up</button>
<button class='btn btn-secondary' type='submit' value='down' name='down'>Down</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary' type='submit' value='ledOn' name='ledOn'>LED On</button>
<button class='btn btn-secondary' type='submit' value='ledOff' name='ledOff'>LED Off</button>
</div>
</div>
<div class='row justify-content-center form-group'>
<div class='btn-group text-center' role='group'>
<button class='btn btn-secondary btn-lg' type='submit' value='stop' name='stop'>Stop</button>
</div>
</div>
</form>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' integrity='sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy' crossorigin='anonymous'></script>
</body>
</html>
Hi I am working in Angular 4 designing using bootstrap 4.
I tried to add search Icon at the end of my label.
Codings below:
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-btn">
<button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2"></div>
</div>
but it comes like the attached image. How to add icon at the end of label. Is any problem with my coding?
Try to make use of input-group component of bootstrap4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Username</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
</div>
</div>
</div>
</div>
</div>
Try this. Wrap input and span to the input-group.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<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>
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<div class="input-group">
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-append">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2">
</div>
</div>
Form-control class for Input makes the text box occupy the entire width. We need to use input-group class to group input and any icon attached to it. Refer code snippet below for example:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Following is the code snippet:
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="location-txt form-control" name="LocationId" >
<span class="input-group-btn location-search">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
CSS
.location-txt
width: calc(100% - 44px);
float: left;
}
.location-search{
display: inline-block;
float: right;
}
I have the following code and It does not stick to the middle of the page. I have tried many CSS tricks to get it to the center of the page but I cannot. Any suggestion? what should I add To CSS so it appears in middle of m page?
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="buynow.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>CrowdLinker</title>
</head>
<div class="container">
<div class='row '>
<div class="col-md-6 offset-md-3 ">
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'> </label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-md-12'>
<div class='form-control total btn btn-info'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
</div>
</form>
</div>
<div class='col-md-4'></div>
</div>
</div>
You can do this with a CSS rule, but here it is as an inline style:
Change
<div class="container">
to
<div class="container" style="text-align:center">
Result:
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="buynow.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>CrowdLinker</title>
</head>
<div class="container" style="text-align:center">
<div class='row '>
<div class="col-md-6 offset-md-3 ">
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'> </label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-md-12'>
<div class='form-control total btn btn-info'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
</div>
</form>
</div>
<div class='col-md-4'></div>
</div>
</div>
BOOTSTRAP FIX:
Replace col-md-6 offset-md-3 above the form tag with col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-5 col-lg-offset-3
NORMAL MODE :
Add float: none !important; margin: 0 auto;
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="buynow.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>CrowdLinker</title>
</head>
<div class="container" style="text-align:center">
<div class='row '>
<div class="col-md-6 offset-md-3 " style="float: none !important; margin: 0 auto;">
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'> </label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-md-12'>
<div class='form-control total btn btn-info'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
</div>
</form>
</div>
<div class='col-md-4'></div>
</div>
</div>
I have a problem with Internet Explorer and HTML code. With Chrome, Edge and firefox all work fine, but in Explorer I have this
instead of
In debug mode I see some error into html code only with explorer:
-Translate:
It has been found tag in excess. In a document is allowed only one body tag.
element or end not expected. All the elements opened have to be closed before the second document end.
Token not expected
The body tag is added by browser. All other page works fine. Do you see something wrong in my code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- Spring csrf -->
<meta name="_csrf" th:content="${_csrf.token}" />
<!-- default header name is X-CSRF-TOKEN -->
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fleets & cars</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<!-- Bootstrap Core CSS -->
<link th:href="#{/static/assets/bootstrap/css/bootstrap.css}"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
th:href="#{/static/assets/component/font-awesome-4.4.0/css/font-awesome.min.css}">
<!-- DataTables -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/dataTables.bootstrap.css}">
<link rel="stylesheet"
th:href="#{/static/assets/plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css}">
<!-- Theme style -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/AdminLTE.min.css}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet"
th:href="#{/static/assets/dist/css/skins/_all-skins.min.css}">
<!-- Select2 angular -->
<link rel="stylesheet"
th:href="#{/static/assets/plugins/select2Angular/select.css}">
<!-- jQuery 2.1.4 -->
<script th:src="#{/static/assets/plugins/jQuery/jQuery-2.1.4.min.js}"
type="text/javascript"></script>
<!-- Bootstrap 3.3.5 -->
<script th:src="#{/static/assets/bootstrap/js/bootstrap.min.js}"
type="text/javascript"></script>
<!-- DataTables -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/dataTables.bootstrap.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js}"></script>
<script type="text/javascript"
th:src="#{/static/assets/plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js}"></script>
<!-- Slimscroll -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/fastclick/fastclick.min.js}"></script>
<!-- Bootstrap-growl -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/notify/jquery.bootstrap-growl.js}"></script>
<!-- AdminLTE App -->
<script type="text/javascript"
th:src="#{/static/assets/dist/js/app.min.js}"></script>
<!-- Angularjs -->
<script th:src="#{/static/assets/js/angular.min.js}"
type="text/javascript"></script>
<!-- Select2 angular -->
<script type="text/javascript"
th:src="#{/static/assets/plugins/select2Angular/select.js}"></script>
<!-- Waiting modal -->
<script
th:src="#{/static/assets/plugins/waiting-modal/waiting-modal.js}"
type="text/javascript"></script>
<script type="text/javascript"
th:src="#{/static/assets/js/fleetAndCar.js}"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="myApp">
<input type="hidden" id="role"
th:value="${#authentication.getAuthorities()}">
<div class="wrapper" data-ng-controller="createFleetController"
id="createFleetControllerId">
<!-- Header nd menu fragment -->
<div th:replace="../fragments/dashboard-header :: dashboard-header"></div>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Fleets Management</h1>
<ol class="breadcrumb">
<li><a th:href="#{/}"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Fleets management</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Fleets</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<!-- Fleets table -->
<table id="fleetsTable"
class="table table-bordered table-striped">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Managed by</th>
<th>Cars</th>
<th>Add User</th>
<th>Delete</th>
</tr>
</thead>
</table>
<!-- Create two equals button because when I am on desktop I show the text add fleet otherwise the + and the tooltip.
This is need because otherwise the text goes out the button -->
<button id="addFleetButton" type="button"
class="btn btn-primary visible-lg col-lg-1 col-lg-offset-11"
data-toggle="modal" data-target="#addFleetModal">Add
fleet</button>
<button id="addFleetButton" type="button"
class="btn btn-primary hidden-lg col-xs-1 col-xs-offset-11"
data-toggle="modal" data-target="#addFleetModal">
<span class="glyphicon glyphicon-plus" data-toggle="tooltip"
title="Add fleet"></span>
</button>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- Modal to add car -->
<div class="modal" id="addFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Fleet parameters</h4>
</div>
<div class="modal-body">
<!-- form start -->
<form novalidate class="simple-form" name="newFleetForm">
<div class="box-body">
<div class="form-group">
<label>Application</label> <input
data-ng-model="newFleet.application" id="application"
type="text" class="form-control" placeholder="Application"
name="application" required>
</div>
<div class="form-group">
<label>Cubic</label> <input id="cubic"
data-ng-model="newFleet.cubic" type="text"
class="form-control" placeholder="Cubic" required>
</div>
<div class="form-group">
<label>Power</label> <input data-ng-model="newFleet.power"
id="power" type="number" min="0" step="1" class="form-control"
placeholder="Power" required>
</div>
<div class="form-group">
<label>Euro class</label> <input
data-ng-model="newFleet.euroClass" id="euroClass" type="text"
class="form-control" placeholder="Euro Class" required>
</div>
<div class="form-group">
<label>Engine type</label> <input
data-ng-model="newFleet.engineType" id="engineType"
type="text" class="form-control" placeholder="Engine type"
required>
</div>
<div class="form-group">
<label>Traction</label> <input
data-ng-model="newFleet.traction" id="traction" type="text"
class="form-control" placeholder="Traction" required>
</div>
<div class="form-group">
<label>Transmission</label> <input
data-ng-model="newFleet.transmission" id="transmission"
type="text" class="form-control" placeholder="Transmission"
required>
</div>
<div class="form-group">
<label>Note </label>(optional)
<textarea data-ng-model="newFleet.note" class="form-control"
rows="3" maxlength="1000"></textarea>
</div>
<div class="form-group" id=existingEcu>
<label>Ecu</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newFleet.ecu" required> <ui-select-match
placeholder="Select ecu">
{{$select.selected.note}}</ui-select-match> <ui-select-choices
repeat="ecu.idEcu as ecu in (ecuList | filter: $select.search) track by ecu.note">
<span data-ng-bind="ecu.note"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-disabled="newFleetForm.$invalid"
data-ng-click="createFleet(newFleet)" id="createFleetButton"
type="button" class="btn btn-primary">Create fleet</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete Fleet -->
<div class="modal" id="deleteFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delete fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">Are you sure? The fleet will be
deleted permanently, you won't be able to recover it.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteFleet()" id="deleteFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal delete User from Fleet -->
<div class="modal" id="deleteUserFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delete user from fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
Are you sure to remove <label data-ng-bind="user"></label>
management from fleet <label data-ng-bind="fleetApplication"></label>?
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-danger btn-ok"
data-ng-click="deleteUserFleet(user,fleetId)"
id="deleteUserFleetButton">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal add User from Fleet -->
<div class="modal" id="addUserFleetModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add user to fleet</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div class="form-group" id=fleetUser>
<label>Select user</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="username" required> <ui-select-match>
{{$select.selected}}</ui-select-match> <ui-select-choices
repeat="username in (fleetUserList | filter: $select.search) track by username">
<span data-ng-bind="username"></span> </ui-select-choices> </ui-select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Cancel</button>
<button class="btn btn-primary btn-ok"
data-ng-click="addUserFleet(username)" id="addUserFleetButton">Add</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</body>
</html>
In edit mode we can see all parsys right, and In preview mode CQ shows us how the page would look in Publish instance. I have a page in which I have hardcoded my textfields and I have used parsys for entering Text (Labels ) on the page ...
But when I enter the preview mode the parsys leaves some space which makes my UI look bad.
Please see the images below.
How do I remove this extra space ?
I think I'm close to solving it ... I think a class in bootstrap CSS is adding the space its not the Parsys anyways here is the code
<%--
Videojet Add New User Component
--%>
<%#include file="/libs/foundation/global.jsp"%>
<%# page
import="com.videojet.hiresite.beans.HRRepresentative,
java.util.*"%>
<%
List<HRRepresentative> hrList = (List<HRRepresentative>)request.getAttribute("hrList");
%>
<cq:include script="head.jsp" />
<html>
<head>
<cq:includeClientLib css="videojetlib" />
<cq:includeClientLib css="customcarousel" />
<cq:includeClientLib css="bootstrapold" />
<link rel="shortcut icon" type="image/ico"
href="/content/dam/videojet/favicon.ico" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="brand" href="#"><img
src="/content/dam/videojet/Videojet-Logo.png"></img></a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<a href="/services/videojet/v1/LoginController/logout"
class="navbar-link">Logout</a>
</p>
<ul class="nav">
<li class="active"><a
href="/services/videojet/v1/AddNewUserController/view">Add
New User</a></li>
<li><a
href="/services/videojet/v1/EditDeleteUsersController/view">Edit
/ Delete User</a></li>
<li><a
href="/services/videojet/v1/EditMyInformationController/view">Edit
My Information</a></li>
<li>Upload Documents</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Adding above new Top navigation -->
<div style =" padding-bottom: 20px;">
<div class="container shadow">
<div class="span11">
<cq:include path="carouselparsys"
resourceType="foundation/components/parsys" />
</div>
<div class="row span11">
<form class="form-horizontal"
action="/services/videojet/v1/AddNewUserController/addUser"
method="POST" enctype="multipart/form-data" id ="addNewUserForm">
<input type="hidden" name="flagField" id="flagField" value="0"/>
<div class="row span11">
<div class="control-group">
<label class="control-label" for="inputEmail"><cq:include path="zensarParsys" resourceType="foundation/components/parsys"/></label>
<div class="controls">
<input type="text" id="addNewUserUID" name="addNewUserUID"
class="input-xlarge" style="height: 30px;">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">First Name</label>
<div class="controls">
<input type="text" id="addNewUserFirstName"
name="addNewUserFirstName" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Last Name</label>
<div class="controls">
<input type="text" id="addNewUserLastName"
name="addNewUserLastName" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Email
Address</label>
<div class="controls">
<input type="text" id="addNewUserEmailId"
name="addNewUserEmailId" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">HR
Representative</label>
<div class="controls">
<select class="input-xlarge" id="addNewUserHRRep"
name="addNewUserHRRep">
<c:forEach items="${hrList}" var="hr">
<option value="${hr.repId}">${hr.firstName}
${hr.lastName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Non-Compete
Letter</label>
<div class="controls">
<input type="file" id="addNewUserNonCompeteLetter"
name="addNewUserNonCompeteLetter" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Offer
Letter</label>
<div class="controls">
<input type="file" id="addNewUserOfferLetter"
name="addNewUserOfferLetter" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Employee
Type</label>
<div class="controls">
<label class="checkbox inline"> <input type="radio"
id="addNewUserLocal" name="addNewUserType" checked="checked" value="1">
Local
</label> <label class="checkbox inline"> <input type="radio"
id="addNewUserField" name="addNewUserType" value="2">
Field
</label> <label class="checkbox inline"> <input type="radio"
id="addNewUserInternational" name="addNewUserType" value="3">
International
</label>
<label class="checkbox inline"> <input type="radio"
id="addNewUserInternational" name="addNewUserType" value="4">
Admin
</label>
</div>
<!-- the Div that brings them in line !!! -->
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Special
Intructions</label>
<div class="controls">
<textarea rows="3" class="input-xlarge" id="addNewUserTextArea"
name="addNewUserTextArea"></textarea>
</div>
</div>
<div class="control-group">
<div class="control-label">
<button type="submit" class="btn btn-primary">Add User</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="footer">
<cq:include path="addNewUserVideojetFooter"
resourceType="foundation/components/parsys" />
</div>
<cq:includeClientLib js="videojetlib" />
<cq:includeClientLib js="customcarousel" />
<cq:includeClientLib js="bootstrapold" />
<!-- modal -->
<div id="usderIdCheckModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-header">
<h3 id="myModalLabel">Checking if User Id is available</h3>
</div>
<div class="modal-body" align="center">
<div align="center">
<img src="/content/dam/videojet/ajax-loader.gif"></img>
</div>
<p>Please Wait...</p>
</div>
</div>
<!-- Second Modal -->
<!-- modal -->
<div id="notAvailableModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Warning</h3>
</div>
<div class="modal-body" align="center">
<div align="center">
</div>
<p>This User Id already exists</p>
</div>
</div>
<script src="/etc/designs/videojet/clientlibs/js/addNewUserScript.js"></script>
</body>
</html>
Maybe there is a style rule in the drag components like visible: hidden; change to display: none
Well I solved it my self. The problem was with bootstrap. The extra space was added by bootstrap class="control-group", I just replaced it with class="row".
There is still little space but at least better than before.
You should be able to add ?wcmmode=disabled to the end of your browser address bar to remove extra spacing.