Проблема с указателем даты за полями текстового поля - PullRequest
Новая
       10

Проблема с указателем даты за полями текстового поля

0 голосов
/ 25 марта 2020

У меня есть страница jsp, созданная следующим образом: 

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  

<!doctype html>
<html lang="en">

<head>

    <title>Register New Patient</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Reference Bootstrap files -->
    <link rel="stylesheet"
         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link type="text/css"
          rel="stylesheet"
          href="${pageContext.request.contextPath}/resources/css/background-color.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(function () {
            $("#datepicker").datepicker({dateFormat: 'dd/mm/yy'})
        });
    </script>

    <style>
        .error {color:red}
    </style>

</head>

<body>

    <h1>Registration</h1>
    <hr>

    <div>

        <div id="registrationbox" style="margin-top: 50px;"
            class="mainbox col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2">

            <div class="panel panel-primary">

                <div class="panel-heading">
                    <div class="panel-title">Register As Patient</div>
                </div>

                <div style="padding-top: 30px" class="panel-body">

                    <!-- Registration Form -->
                    <form:form action="${pageContext.request.contextPath}/register/processPatientRegistrationForm" 
                               modelAttribute="mytonMedicalUser"
                               class="form-horizontal">

                        <!-- Place for messages: error, alert etc ... -->
                        <div class="form-group">
                            <div class="col-xs-15">
                                <div>

                                    <!-- Check for registration error -->
                                    <c:if test="${registrationError != null}">

                                        <div class="alert alert-danger col-xs-offset-1 col-xs-10">
                                            ${registrationError}
                                        </div>

                                    </c:if>

                                </div>
                            </div>
                        </div>

                        <!-- User name -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="userName" cssClass="error" />
                            <form:input path="userName" placeholder="username (*)" class="form-control" />
                        </div>

                        <!-- Password -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
                            <form:errors path="password" cssClass="error" />
                            <form:password path="password" placeholder="password (*)" class="form-control" />
                        </div>

                        <!-- Confirm Password -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
                            <form:errors path="matchingPassword" cssClass="error" />
                            <form:password path="matchingPassword" placeholder="confirm password (*)" class="form-control" />
                        </div>


                        <!-- First name -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="firstName" cssClass="error" />
                            <form:input path="firstName" placeholder="first name (*)" class="form-control" />
                        </div>

                        <!-- Last name -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="lastName" cssClass="error" />
                            <form:input path="lastName" placeholder="last name (*)" class="form-control" />
                        </div>

                        <!-- Email -->
                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="email" cssClass="error" />
                            <form:input path="email" placeholder="email (*)" class="form-control" />
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="gender" cssClass="error" />
                            <form:select path="gender" class="form-control">
                                <form:option value="male" label="Male" />
                                <form:option value="female" label="Female" />   
                            </form:select>
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="dob" cssClass="error" />
                            <label for="datepicker">Enter Your Date of Birth (*):</label>
                                <input type="text" name="dob" id="datepicker">
                        </div>

                        <div style="margin-bottom: 25px" class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
                            <form:errors path="address" cssClass="error" />
                            <form:input path="address" placeholder="address (*)" class="form-control" />
                        </div>

                        <div style="margin-top: 10px" class="form-group">                       
                            <div class="col-sm-6 controls">
                                <button type="submit" class="btn btn-primary">Register</button>
                            </div>
                        </div>

                    </form:form>

                </div>


            </div>

        </div>

    </div>

</body>
</html>

Как отображается мой указатель даты

Я знаю, что это как-то связано с z-индекс указателя даты ... однако я не уверен, как изменить z-индекс указателя даты bootstrap внутри тегов, так как редактирование z-индекса связано css.

Есть ли способ сделать это внутри тегов или каким-либо другим простым способом, чтобы он отображался перед моими текстовыми полями?

...