Ich war mir nicht ganz sicher in welchen Bereich dieses jetzt genau reinfällt.
Ich habe eine Thymleaf Web - Anwendung
master.html:
mask.html
style.css
Ich versuche schon den ganzen Tag das Bootstrap Modal auf 80% height horizontal zentriert zu bekommen. Ich habe viele unterschiedliche CSS Anweisungen ausprobiert, allerdings ohne Erfolg.
Wer könnt mir bitte kurz hierbei helfen?
Ich habe eine Thymleaf Web - Anwendung
master.html:
Code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${title == null} ? #{app.name} : #{app.name} + ' - ' + #{${title}}">Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link th:href="@{/css/style.css}" rel="stylesheet" media="screen"/>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- JQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Own Actions -->
<script th:src="@{/js/actions.js}"></script>
</head>
<body>
<div th:replace="${view} :: content">Content</div>
</body>
</html>mask.html
Code:
!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="content" id="editor">
<form name='f' th:object="${editor}" method='POST'>
<select class="form-control" id="languages" th:field="*{languageID}">
<option th:each="language : ${used_languages}"
th:value="${language.id}"
th:text="${language.name}"
>
</option>
</select>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="addModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>style.css
Code:
@charset "ISO-8859-1";
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
/* Editor */
#editor {
height: 100%;
}
#editor .modal {
height: 100%;
}Ich versuche schon den ganzen Tag das Bootstrap Modal auf 80% height horizontal zentriert zu bekommen. Ich habe viele unterschiedliche CSS Anweisungen ausprobiert, allerdings ohne Erfolg.
Wer könnt mir bitte kurz hierbei helfen?
