Currently, I am utilizing Thymeleaf, Bootstrap, and CSS for the front-end view of my project. I am encountering an issue where I am unable to align the button and the level as displayed in the provided image:
https://i.sstatic.net/8RoPi.png
Update:
Below is the source code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="shared-fragments/page"
th:inline="text">
<head lang="en">
<link th:href="@{/datepicker/css/datepicker3.css}" rel="stylesheet"/>
</head>
<body>
<div layout:fragment="content" class="container">
<th:block th:include="fragments/common :: top"/>
<!-- ** The code snippet below demonstrates the green button ** -->
<div class="pull-right"
th:with="hasKeyField=${!process.rowView.getAllFields().?[systemName==T(com.ahkgroup.projectmanagement.domain.definition.Field).KEY_FIELD].isEmpty()}">
<a class="btn btn-success navbar-btn"
th:if="${hasKeyField}"
th:href="${#mvc.url('VC#newRow').arg(0, project.id).arg(1, process.id).build()}">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span th:text="#{view.common.new}">New</span>
</a>
</div>
<form class="form-horizontal" th:action="${kf}
? ${#mvc.url('VC#save').arg(0, project.id).arg(1, process.id).arg(2, kf).build()}
: ${#mvc.url('VC#saveNewRow').arg(0, project.id).arg(1, process.id).build()}" method="post">
<th:block th:each="field : ${uniqueEditFields}">
<th:block th:switch="${field.projectField.type.actualType}">
<th:block th:case="${T(com.ahkgroup.projectmanagement.domain.definition.FieldType).STRING}"
th:with="readOnly=${kf} and ${#strings.equals(field.projectField.systemName, T(com.ahkgroup.projectmanagement.domain.definition.Field).KEY_FIELD)}">
<div th:replace="fragments/components :: text-field (${field}, ${data}, ${readOnly}, ${errors})"></div>
</th:block>
// More cases here...
</th:block>
</th:block>
<div class="form-group">
<input type="hidden" th:id="${T(com.ahkgroup.projectmanagement.domain.definition.Field).KEY_FIELD}"
th:name="${T(com.ahkgroup.projectmanagement.domain.definition.Field).KEY_FIELD}" th:value="${kf}"/>
<input class="btn btn-default btn-success" type="submit"/>
</div>
</form>
</div>
</body>
<th:block layout:fragment="scripts">
// Scripts here...
</th:block>
</html>
Could someone provide guidance on how to align the button with the form and remove extra space from the Key field to maintain consistency with the rest of the elements? Any advice or suggestions are greatly appreciated. Thank you!