orderList 페이지 div크기 차이

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

주문 목록 검색, 취소

작성

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.

1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)

질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)

[질문 내용]
여기에 질문 내용을 남겨주세요.

html코드는 같은데 입력창의 배치가 form-inline으로 안 나오는 이유가 있나요?

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<body>
<div class="container">
  <div th:replace="fragments/bodyHeader :: bodyHeader"/>
  <div>
    <div>
      <form th:object="${orderSearch}" class="form-inline">
        <div class="form-group mb-2">
          <input type="text" th:field="*{memberName}" class="formcontrol" placeholder="회원명"/>
        </div>
        <div class="form-group mx-sm-1 mb-2">
          <select th:field="*{orderStatus}" class="form-control">
            <option value="">주문상태</option>
            <option th:each=
                            "status : ${T(jpabook.jpashop.domain.OrderStatus).values()}"
                    th:value="${status}"
                    th:text="${status}">option
            </option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary mb-2">검색</button>
      </form>
    </div>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>#</th>
        <th>회원명</th>
        <th>대표상품 이름</th>
        <th>대표상품 주문가격</th>
        <th>대표상품 주문수량</th>
        <th>상태</th>
        <th>일시</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="item : ${orders}">
        <td th:text="${item.id}"></td>
        <td th:text="${item.member.name}"></td>
        <td th:text="${item.orderItems[0].item.name}"></td>
        <td th:text="${item.orderItems[0].orderPrice}"></td>
        <td th:text="${item.orderItems[0].count}"></td>
        <td th:text="${item.status}"></td>
        <td th:text="${item.orderDate}"></td>
        <td>
          <a th:if="${item.status.name() == 'ORDER'}" href="#"
             th:href="'javascript:cancel('+${item.id}+')'"
             class="btn btn-danger">CANCEL</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
<script>
  function cancel(id) {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "/orders/" + id + "/cancel");
    document.body.appendChild(form);
    form.submit();
  }
</script>
</html>

java spring 웹앱 spring-boot jpa

답변 2

codesweaver

안녕하세요. 방경원님, 공식 서포터즈 코즈위버입니다.

회원명 인풋박스가 왜 인라인 요소로 표현되지 않는지에 대한 질문인것 같습니다.

작성하신 코드중 아래를 참조하여 수정해주세요. CSS 클래스 form-control 은 부트스트랩 예약된 클래스 이므로 이름이 다를 경우 적용되지 않습니다.

<input type="text" th:field="*{memberName}" class="formcontrol" placeholder="회원명"/>

<!-- 아래와 같이 변경-->
<input type="text" th:field="*{memberName}" class="form-control" placeholder="회원명"/>

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 경원님.

form-inline으로 원하는 레이아웃이 나오지 않으셔서 많이 답답하셨을 것 같습니다. 이 문제는 Bootstrap CSS 클래스들과 관련이 있을 수 있습니다. 몇 가지 확인해야 할 사항들을 안내드리겠습니다.

Bootstrap CSS Import 여부: Bootstrap CSS가 올바르게 import 되었는지 확인해주세요.
CSS Override 문제: Bootstrap CSS가 다른 CSS 설정에 의해 override되고 있는지 확인해주세요.

유사한 문제와 관련하여 도움이 될 수 있는 답변을 아래에 공유 드립니다:

타임리프 orderList.html에서 요약된 코드와 클래스 관련 이슈 해결 방법: 이 답변에서는 orderList.html 파일에 관한 여러 문제를 다루고 있어 구체적인 해결 방법을 참고하실 수 있습니다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<body>
  <div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"></div>
    <div>
      <div>
        <form th:object="${orderSearch}" class="form-inline">
          <div class="form-group mb-2">
            <input type="text" th:field="*{memberName}" class="form-control" placeholder="회원명"/>
          </div>
          <div class="form-group mx-sm-1 mb-2">
            <select th:field="*{orderStatus}" class="form-control">
              <option value="">주문상태</option>
              <option th:each="status : ${T(jpabook.jpashop.domain.OrderStatus).values()}"
                      th:value="${status}" th:text="${status}">option
              </option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary mb-2">검색</button>
        </form>
      </div>
      <table class="table table-striped">
        <thead>
        <tr>
          <th>#</th>
          <th>회원명</th>
          <th>대표상품 이름</th>
          <th>대표상품 주문가격</th>
          <th>대표상품 주문수량</th>
          <th>상태</th>
          <th>일시</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${orders}">
          <td th:text="${item.id}"></td>
          <td th:text="${item.member.name}"></td>
          <td th:text="${item.orderItems[0].item.name}"></td>
          <td th:text="${item.orderItems[0].orderPrice}"></td>
          <td th:text="${item.orderItems[0].count}"></td>
          <td th:text="${item.status}"></td>
          <td th:text="${item.orderDate}"></td>
          <td>
            <a th:if="${item.status.name() == 'ORDER'}" href="#"
               th:href="'javascript:cancel('+${item.id}+')'"
               class="btn btn-danger">CANCEL</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div th:replace="fragments/footer :: footer"></div>
  </div> <!-- /container -->
</body>
<script>
  function cancel(id) {
      var form = document.createElement("form");
      form.setAttribute("method", "post");
      form.setAttribute("action", "/orders/" + id + "/cancel");
      document.body.appendChild(form);
      form.submit();
  }
</script>
</html>

위의 코드를 참고하시고, 사용하시는 Bootstrap 버전과 호환성 문제를 확인해보는 것도 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

orderList 페이지 div크기 차이