Question

在编辑模式下，我们可以看到所有的解析正确，而在预览模式中，CQ向我们展示了页面在Publish实例中的外观。我有一个页面，我在其中硬编码了我的文本域，并且我使用了parsys在页面上输入Text（Labels）... 但是当我进入预览模式时，parsys会留下一些空间，这会让我的UI看起来很糟糕。请看下面的图片。

enter image description here

如何删除这个额外的空间？

我认为我接近解决它...我认为bootstrap CSS中的一个类正在添加空间而不是Parsys，不管怎样这里是代码

<%--
  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>

Answer 1

也许在拖动组件中有一个样式规则，如visible：hidden;更改为显示：无

Answer 2

我自己解决了。问题出在bootstrap上。引导程序class="control-group"添加了额外的空间，我只是将其替换为class="row"。仍有很小的空间，但至少比以前更好。

Answer 3

您应该可以将?wcmmode=disabled添加到浏览器地址栏的末尾，以消除额外的间距。

CQ5 parsys即使在预览模式下也会留下一些空间？

3 个答案: