Почему css не загружается в jsp файл - PullRequest
Новая
       8

Почему css не загружается в jsp файл

0 голосов
/ 25 февраля 2020

Я использую JSP форму: флажок и css. Когда флажок установлен, флажок должен изменить цвет на желтый. Это не работает, но для формы: radiobutton css класс работает? Что я должен делать, какие-либо идеи?

JSP: 

<c:forEach var="category" items="${categories}">
                <div class="form-group form-group--checkbox">
                    <label>
                        <form:checkbox path="categories" value="${category.id}" id="categories"
                                       itemLabel="${category.name}"></form:checkbox>

                        <span class="checkbox"></span>
                        <span class="description">${category.name}</span>
                    </label>
                </div>
            </c:forEach>

CSS: 

form .form-group--checkbox input:checked + .checkbox {
  background-color: #f9c910;
}

1 Ответ

0 голосов
/ 27 февраля 2020 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Document</title>
    <link rel="stylesheet" href="resources/static/css/style.css"/>

</head>
<body>
<%@ include file="/WEB-INF/JSPF/headerAddDonation.jspf" %>

<section class="form--steps">
    <div class="form--steps-instructions">
        <div class="form--steps-container">
            <h3>Ważne!</h3>
            <p data-step="1" class="active">
                Uzupełnij szczegóły dotyczące Twoich rzeczy. Dzięki temu będziemy
                wiedzieć komu najlepiej je przekazać.
            </p>
            <p data-step="2">
                Uzupełnij szczegóły dotyczące Twoich rzeczy. Dzięki temu będziemy
                wiedzieć komu najlepiej je przekazać.
            </p>
            <p data-step="3">
                Wybierz jedną, do
                której trafi Twoja przesyłka.
            </p>
            <p data-step="4">Podaj adres oraz termin odbioru rzeczy.</p>
        </div>
    </div>

    <div class="form--steps-container">
        <div class="form--steps-counter">Krok <span>1</span>/4</div>

        <!-- STEP 1: class .active is switching steps -->
        <form:form name="donationForm" method="post" modelAttribute="donation">

        <div data-step="1" class="active">
            <h3>Zaznacz co chcesz oddać:</h3>
            <c:forEach var="category" items="${categories}">
                <div class="form-group form-group--checkbox">
                    <label>

                        <form:checkbox path="categories" value="${category.id}" id="categories"
                                       itemLabel="${category.name}"></form:checkbox>

                        <span class="checkbox"></span>
                        <span class="description">${category.name}</span>
                    </label>
                </div>
            </c:forEach>

            <div class="form-group form-group--buttons">
                <button type="button" class="btn next-step">Dalej</button>
            </div>
        </div>

        <!-- STEP 2 -->
        <div data-step="2">
            <h3>Podaj liczbę 60l worków, w które spakowałeś/aś rzeczy:</h3>

            <div class="form-group form-group--inline">
                <label>
                    Liczba 60l worków:
                    <form:input path="quantity" type="number" name="bags" step="1" min="1" id="quantityOfBags"/>

                </label>
            </div>

            <div class="form-group form-group--buttons">
                <button type="button" class="btn prev-step">Wstecz</button>
                <button type="button" class="btn next-step">Dalej</button>
            </div>
        </div>


        <!-- STEP 4 -->
        <div data-step="3">
            <h3>Wybierz organizacje, której chcesz pomóc:</h3>

            <c:forEach var="institution" items="${institutions}">
                <div class="form-group form-group--checkbox">
                    <label>
                        <form:radiobutton path="chosenInstitution" id="institution"
                                          value="${institution.id}"></form:radiobutton>

                        <span class="checkbox radio"></span>
                        <span class="description">
                  <div class="title">${institution.name}</div>
                  <div class="subtitle">
                          ${institution.description}
                  </div>
                </span>
                    </label>
                </div>
            </c:forEach>

            <div class="form-group form-group--buttons">
                <button type="button" class="btn prev-step">Wstecz</button>
                <button type="button" class="btn next-step">Dalej</button>
            </div>
        </div>

        <!-- STEP 5 -->
        <div data-step="4">
            <h3>Podaj adres oraz termin odbioru rzecz przez kuriera:</h3>

            <div class="form-section form-section--columns">
                <div class="form-section--column">
                    <h4>Adres odbioru</h4>
                    <div class="form-group form-group--inline">
                        <label> Ulica <form:input path="street" type="text" name="street" id="address"/></label>

                    </div>

                    <div class="form-group form-group--inline">
                        <label> Miasto <form:input path="city" type="text" name="city" id="address"/> </label>

                    </div>

                    <div class="form-group form-group--inline">
                        <label>
                            Kod pocztowy <form:input path="zipCode" type="text" name="postCode" id="address"/>

                        </label>
                    </div>

                    <div class="form-group form-group--inline">
                        <label>
                            Numer telefonu <form:input path="phoneNumber" type="text" name="phoneNumber" id="address"/>

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

                <div class="form-section--column">
                    <h4>Termin odbioru</h4>
                    <div class="form-group form-group--inline">
                        <label> Data <form:input path="pickUpDate" type="date" name="data" id="pickUp"/> </label>

                    </div>

                    <div class="form-group form-group--inline">
                        <label> Godzina <form:input path="pickUpTime" type="time" name="time" id="pickUp"/> </label>

                    </div>

                    <div class="form-group form-group--inline">
                        <label>
                            Uwagi dla kuriera
                            <form:textarea path="pickUpComment" name="more_info" rows="5" id="pickUp"></form:textarea>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group form-group--buttons">
                <button type="button" class="btn prev-step">Wstecz</button>
                <button id="sumUp" type="button" class="btn next-step">Dalej</button>
            </div>
        </div>


        <!-- STEP 6 -->
        <div data-step="5">
            <h3>Podsumowanie Twojej darowizny</h3>

            <div class="summary">
                <div class="form-section">
                    <h4>Oddajesz:</h4>
                    <ul>
                        <li>
                            <span class="icon icon-bag"></span>
                            <span class="summary--text" id="bags"
                            ></span
                            >
                        </li>

                        <li>
                            <span class="icon icon-hand"></span>
                            <span class="summary--text" id="chosenInstitution"
                            ></span
                            >
                        </li>
                    </ul>
                </div>

                <div class="form-section form-section--columns">
                    <div class="form-section--column">
                        <h4>Adres odbioru:</h4>
                        <ul id="givenAddress">
                        </ul>
                    </div>

                    <div class="form-section--column">
                        <h4>Termin odbioru:</h4>
                        <ul id="pickUpSummary">
                        </ul>
                    </div>
                </div>
            </div>

            <div class="form-group form-group--buttons">
                <button type="button" class="btn prev-step">Wstecz</button>
                <button type="submit" class="btn">Potwierdzam</button>
            </div>
        </div>
    </div>
    </form:form>
</section>



<%@ include file="/WEB-INF/JSPF/footer.jspf" %>

<script src="/resources/static/js/app.js"></script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...