Center My bootstrap form in the page - css

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>

Related

In bootstrap 3, why isn't button aligning to the bottom of the column as the CSS states?

I'm using Bootstrap 3 and I'm trying to align a button to the bottom of a column. The only way I can seem to accomplish this is by assigning an explicit height and using absolute positioning. Since I don't want all columns to behave this way, I'm wondering if there's something built into Bootstrap 3 that would allow me to do this?
.m-t {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-sm-3 m-t">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-sm-2 m-t">
<label for="gender">Gender</label>
<select class="form-control">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Date of Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
</div>
</div>
<div class="col-sm-2 m-t" style="display: flex; justify-content: flex-start; align-items: flex-end;">
<button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>
Basically need to add the missing label for the spacing. I've added also .form-control to the .btn as to allow for better display in mobile. Also consider hiding the dummy label on mobile using .hidden-sm or similar.
.m-t {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group">
<div class="col-sm-3 m-t">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-sm-3 m-t">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-sm-2 m-t">
<label for="gender">Gender</label>
<select class="form-control">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-sm-2 m-t">
<label for="birthDate" class="control-label">Birth</label>
<div class="input-group date" id="birthDateDiv">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
</div>
</div>
<div class="col-sm-2 m-t" style="">
<label for="dummy" class="control-label"> </label>
<button class="btn btn-primary form-control" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>
If you want to align button to bottom, you should apply css settings to form-group. In other words:
<div class="form-group" style="display: flex; align-items: flex-end;">
Bootstrap 3 is deprecated.
Solution: Adapt to Bootstrap 5.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="panel blank-panel">
<div class="panel-body">
<form>
<div class="form-group d-flex flex-wrap">
<div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="fname">First Name</label>
<input type="text" id="fname" class="form-control">
</div>
<div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="lname">Last Name</label>
<input type="text" id="lname" class="form-control">
</div>
<div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="gender">Gender</label>
<select class="form-select">
<option value="" selected>Please Select</option>
<option value="1">Female</option>
<option value="2">Male</option>
<option value="3">Unspecified</option>
</select>
</div>
<div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto">
<label for="birthDate" class="control-label">Date of Birth</label>
<div class="input-group date" id="birthDateDiv">
<input id="dateofbirth" class="form-control" type="date" />
</div>
</div>
<div class="col-md-1 col-8 mt-3 px-2 ms-md-auto mx-auto" style="display: flex; justify-content: flex-start; align-items: flex-end;">
<button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button>
</div>
</div>
</form>
</div>
</div>
</div>

How to make input fields not falling into new line for inline form of bootstrap 4?

I have an inline form that its input fields are more longer width than screen therefore some fields fall into new line.
<!doctype html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Understanding the bootstrap column should not exceed 12 columns width per row, but since I have many fields I want those those fields go into one single row with scroll bar.
How can I do that? Even thought, I set style flex-wrap: nowrap; overflow-x: scroll; to class .row already, it is still not working. Thanks.
you achive this using adding flex-nowrap class in .form-row div
<!doctype html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row flex-nowrap">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Change the col-2 class to just col and everything lays out on one line.
<!doctype html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

How to make one column have position fixed on horizontal scroll only?

I have one inline form that spans over horizontally and vertically. In this form, I have one
last column that is an add button that I want it to have a fixed position but only when I scroll the form horizontally, not vertically.
<!doctype html>
<html lang="en">
<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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.btn-control {
position: fixed;
right: 0;
}
</style>
</head>
<body>
<h1>Inline form</h1>
<div class="container" style="width: 55%; height: 500px;">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form style=" ">
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I have set position: fixed but does not solve the problem as currently, the button has fixed position on both horizontal and vertical. I found some resources, but it does not fit my need.
Thanks.
position sticky should work
.btn-control {
position: sticky;
right: 0;
}
if it work you can change right position

Bootstrap resizing input & text(right of input)

I'm stuck for a while on a scaling problem ...
When i resize the window(mobile) the "%" go below the input even with the 80% width, idk why he don't stay at right...
<html>
<head>
<!--<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<body>
<div class="col-md-6">
<div class="row form-inline text-center">
<div class="form-group col-md-3 form-inline text-center">
<label for="a">A</label></br>
<input id="a" name="a" type="number" class="form-control" style="width:80%;"/><b>%</b>
</div>
<div class="form-group col-md-3">
<label for="b">B</label></br>
<input id="b" name="b" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">C</label></br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
<div class="form-group col-md-3">
<label for="c">D</label> </br>
<input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
</div>
</div>
</div>
<body>
</html>
if anyone knows what's wrong ...
The '%' is taking up more then 20% of the width on small screens. A nice solution would be to use input addons available in bootstrap: http://getbootstrap.com/components/#input-groups-basic

CQ5 parsys leaves some space even in preview mode?

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.

Resources