display page number on mouse-hover issue#527

This commit is contained in:
mannam
2024-01-02 16:44:57 +05:30
parent bbd8de0899
commit 5af5794dfe
2 changed files with 40 additions and 1 deletions

View File

@@ -13,7 +13,14 @@
<div class="row justify-content-center">
<h2 th:text="#{multiTool.header}"></h2>
<div class="col-md-12" id="pages-container-wrapper">
<div id="pages-container"></div>
<div id="pages-container">
<div class="page-container" th:each="pdf, status: ${pdfList}" th:id="'page-container-' + ${status.index}">
<div class="page-number-container">
<span th:text="${status.index + 1}"></span>
</div>
<img th:src="${pdf.imageUrl}" alt="PDF Page">
</div>
</div>
</div>
</div>
</div>
@@ -207,6 +214,18 @@
#add-pdf-button {
margin: 0 auto;
}
.page-number {
position: absolute;
top: 5px;
right:5px;
color:white;
background-color: #007bff; /* Primary blue color */
padding: 3px 6px;
border-radius: 4px;
font-size: 12px;
z-index:2;
}
</style>
</body>