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.
Related
I have the following code in bootstrap. I need to align the label with the checkbox but even after looking at some solutions, I have not been successful:
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label>
Show entities?
<input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
</label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
Considering if you are using bootstrap 4, you can do this to get that result
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>
<!-- or using inline form -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Show entities?
</label>
</div>
Try this code snippet hope it will help :
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<label class="d-flex align-items-center"> Show entities? <input type="checkbox" id="inactiveEnt" name="checkbox" class="ml-3"> </label>
</div>
<div class="col-md-8" id="isactiveTxt">
<span style="font-weight:bold">Note: "-" inactive</span>
</div>
</div>
If you're using Bootstrap, just use a form-group. Create the label and reference the input by using a "for" attribute that matches the ID of the input.
<div class="form-group row">
<label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
</div>
</div>
If I understood what you want I think this can be the solution you are looking for (append classes btn and btn-default to your input element to align vertically to your label text)
<div class="row">
<div class="col-xs-12">
<span>
<input type="checkbox" class="btn btn-default">
</span>
<label class="form-label">here is my label</label>
</div>
</div>
here is the fiddle: https://jsfiddle.net/p9wud84v/1/
I have a angularJs form, which has multiple controls. When the page loads initially, all the contents fit in the form. When the validation messages are shown, the submit button, cancel button are not shown. These buttons are getting below.
Below is the code in index.cshtml. I have only put few controls, additional controls are also there.
<body class="ng-cloak">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<ul class="nav navbar-right nav-pills">
<li ng-class="{active: createMenu}">
Create</li>
<li ng-class="{active: dashboardMenu}">
Dashboard
</li>
</ul>
</div>
</nav>
</header>
</div>
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Groups:</label>
</div>
<div class="col-sm-4 form-group">
<select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)">
<option value="">-- Select the Group --</option>
</select>
</div>
</div>
<span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<br />
<div class="row">
<div class="col-sm-6">
<label class="control-label">Start date</label>
<div class="form-group">
<div class="input-group date" id="startDatepicker">
<input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End date</label>
<div class="form-group">
<div class="input-group date" id="endDatepicker">
<input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span>
</div>
<!--/col-->
<div class="col-sm-6">
<label class="control-label">Start Time</label>
<div class="form-group">
<div class="input-group" id="startTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End Time</label>
<div class="form-group">
<div class="input-group" id="endTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
</div>
</div>
<br/>
</div>
</div>
Is it possible to fit the contents even during the validation messages are shown? i am not setting any specific class to set height. How to make sure that submit and cancel button are also visible, when the form height increases. I checked this link extending a form's height to fit the content in the form , but could not find the solution.
Adding the snippet to show the issue:
Initial load shows as :
After error message:
Thanks
For making anything auto-adjustable according to its content, you can use min-height property.
min-height:100px;
Try this, add it in your form css, like this
<form name="mainForm" id="createForm"
ng-submit="mainForm.$valid && add()"
novalidate=""
style="min-height:100px;">
I am trying to center my labels on top of me datetimepicker inputs but text-align:center does not seem to be cutting it.
http://jsfiddle.net/aesh3ufk/4/
Does anyone know how to center the labels on top of my inputs? Even !important does not work...
<div class="row">
<div class="col-xs-12">
<h4><strong>ITEMS CHECKED IN</strong></h4>
<div class='col-md-6'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<label for="To">To</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' id="To" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
That's an easy fix actually. Just add text-center to your col-md-6 <div>s:
<div class="row">
<div class="col-xs-12">
<h4 class="CAlign"><strong>ITEMS CHECKED IN</strong></h4>
<!-- Right Here -->
<div class='col-md-6 text-center'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- And Here -->
<div class='col-md-6 text-center'>
<label for="To">To</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' id="To" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
JSFiddle Example
The label's display style is inline-block and you must change it to block in order to be able to align the text to the center
One option is just to add the .text-center Bootstrap class to the parent div like so:
<div class='col-md-6 text-center'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
http://jsfiddle.net/aesh3ufk/6/
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.
I have decided to have a 6/6 column grid layout with Bootstrap and my navbar does have a brand and login fields.
Unfortunately, I can't seem to align the submit button if I place a help-block on the password input: http://www.bootply.com/eJ7QMjincO
Here's the code:
<header class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-md-6">
<!-- Login -->
<form class="navbar-form navbar-input-group">
<div class="form-group">
<input type="text" class="form-control" placeholder="E-Mail">
<input id="password" type="password" class="form-control" placeholder="Password">
<span class="help-block text-right">Forgot password?</span>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</header>
Just add:
vertical-align: top;
To the button.
Example: http://www.bootply.com/WNCOewwnBs
You can write your HTML in much better way to provide flexibility between devices. Below is the simple example for that.
<form class="navbar-form navbar-input-group">
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder="E-Mail" type="text">
</div>
<div class="col-md-4">
<input id="password" class="form-control" placeholder="Password" type="password">
<label class="help-block text-right">Forgot password?</label>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
BootPly: http://www.bootply.com/kroJXdvceD