I want to change the width of the table cell dynamically. In a different file I define width do the calculation for it. Then I pass it to this templ function. Width is calculated by dividing i by total then multiplied by 100. In the styles section I want .done’s width to change based on width. any ideas on how to make that work?
templ contentComponent(Header string, body templ.Component, Image string, Next string, Previous string, Total int, i int, width int) {
<body>
<div class="container">
<div class="bar">
<table style="width: 1000px; height: 25px;">
<tr>
<td class="done" style="width: {{ printf('%g%%', width) }};"> </td>
<td class="todo"> </td>
</tr>
</table>
</div>
<h1>{ Header }</h1>
if Image == "No image" {
<div class="default">
<p></p>
</div>
}
if Image != "No image" {
<div class="image-container">
<img src={ path.Base(Image) } ></img>
</div>
}
<div class="content">
@body
</div>
<div class="next">
if Previous != "" {
<a href={ templ.SafeURL(Previous) } >Previous Page</a>
}
<button type="button" onclick="location.href='index.html'">Home</button>
if Next != "" {
<a href={ templ.SafeURL(Next) } >Next Page</a>
}
</div>
<div class="PageNum">
<span>{ fmt.Sprintf("%d of %d", i+1, Total) }</span> <!-- Display the page number -->
</div>
</div>
</body>
<style>
.bar table {
width: 100%;
border-collapse: collapse; /* Collapse borders so they don't double up */
}
.bar td {
border: 1px solid black; /* Add a solid black border to all table cells */
}
.done{
width: { width }%;
background-color: rgba(0, 128, 0);
}
.PageNum {
position: fixed;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
}
.default{
width: 1px;
height: 1px;
}
.container {
position: relative; /* Make the container relatively positioned */
display: flex;
flex-direction: column; /* Arrange children vertically */
justify-content: flex-start; /* Align children at the start of the container */
align-items: center;
min-height: 100vh; /* Set container height to at least viewport height */
padding-top: 20px; /* Add padding to the top for spacing */
}
h1 {
margin-bottom: 20px; /* Add some spacing below the header */
}
.image-container {
margin-bottom: 20px; /* Add some spacing below the image */
}
.content {
max-width: 600px; /* Optionally set a max width for the content */
text-align: center; /* Center-align the content */
}
.image-container img {
width: 150px;
height: 100px;
}
body {
background-color: #f0f0f0; /* Optional: Set a background color */
margin: 0; /* Reset default margin */
}
</style>
}
I’ve been going back and forth with chatGPT and I ran it out of ideas. No other syntax or anything I try seems to make a difference either.