Search code examples
csstwitter-bootstrapaem

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.

enter image description here

enter image description here

enter image description here

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><a href="/services/videojet/v1/UploadDocumentsController/view">Upload Documents</a></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>
Solution

  • 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.