Godber
(David Morris)
7 October 2024 08:37
1
RapidWeaver Elements b15 (22935)
html files and headers all within 1 container and in edit mode all ok. in preview one has right spacing other goes to the edge…if I drag and swap em over the same thing happens top one ok bottom one stretched??
same if published
ps tried within a flex system…same thing
dan
(Dan C.)
7 October 2024 14:28
2
I’m not sure how you’re building those tables… I’m wondering if some ill-formed custom HTML is to blame
Share your project and I can take a look!
Godber
(David Morris)
7 October 2024 14:31
3
elementsapp://downloadDocument/ioSkVX7Cgl12
wouldn’t have thought it was a html thing as I swap em over same thing happens
asked chat gap to create originally
dan
(Dan C.)
7 October 2024 14:58
4
The problem is because the custom components contain a full HTM page, i.e. it has the head and body tags - this will never work properly
I’ve done a quick pass and tidied up the code to get it working…
<table>
<thead>
<tr>
<th>Day/Date</th>
<th>H.W.</th>
<th>H.T.</th>
<th>Start</th>
<th>Race</th>
</tr>
</thead>
<tbody>
</tr>
<tr>
<td>October 5th Saturday</td>
<td>15.04</td>
<td>2.90</td>
<td>13.30</td>
<td>Marlin Spike 1</td>
</tr>
<tr>
<td>October 6th Sunday</td>
<td>15.30</td>
<td>2.90</td>
<td>14.00</td>
<td>Marlin Spike 2</td>
</tr>
<tr>
<td>October 12th Saturday</td>
<td></td>
<td></td>
<td></td>
<td>No Racing</td>
</tr>
<tr>
<td>October 13th Sunday</td>
<td></td>
<td></td>
<td></td>
<td>No Racing</td>
</tr>
<tr>
<td>October 19th Saturday</td>
<td>14.39</td>
<td>3,20</td>
<td>13.00</td>
<td>Marlin Spike 3</td>
</tr>
<tr>
<td>October 20th Sunday</td>
<td>15.20</td>
<td>3.20</td>
<td>13.50</td>
<td>Laying Up/Sunset Trophy</td>
</tr>
</tbody>
</table>
And here’s the code for your second table:
<table>
<tr>
<th>Race</th>
<th>Winner</th>
</tr>
<tr>
<td>Brass Monkey</td>
<td></td>
</tr>
<tr>
<td>Fitting Out</td>
<td></td>
</tr>
<tr>
<td>Easter Bunny Series</td>
<td>Simon White</td>
<tr>
<td>Helmsman Series</td>
<td></td>
</tr>
<tr>
<td>Pitman Plate (Helmsman Series 2nd Place)</td>
<td></td>
</tr>
<tr>
<td>Saturday Scratch Series</td>
<td></td>
</tr>
<tr>
<td>Wright Trophy</td>
<td></td>
</tr>
<tr>
<td>Sunday Points Series (Baines Cup)</td>
<td></td>
</tr>
<tr>
<td>Slow Handicap</td>
<td></td>
</tr>
<tr>
<td>Whitsun Tankard</td>
<td>Ian Wright</td>
</tr>
<tr>
<td>Ladies Cup</td>
<td></td>
</tr>
<tr>
<td>Pirate Pam The Terrible</td>
<td></td>
</tr>
<tr>
<td>Pirate Pam Pistol (Best Dressed Pirate)</td>
<td></td>
</tr>
<tr>
<td>Breakfast Race</td>
<td></td>
</tr>
<tr>
<td>Single Handed</td>
<td>Sam Grasse</td>
</tr>
<tr>
<td>Commodores Cup</td>
<td>Ian Barratt</td>
</tr>
<tr>
<td>Grandparent & Grandchild</td>
<td></td>
</tr>
<tr>
<td>Long Distance (Endeavour)</td>
<td></td>
</tr>
<tr>
<td>Round Northey Island Madoc Trophy (Endeavour Series)</td>
<td></td>
</tr>
<tr>
<td>Round Osea & Northey Island (Endeavour Series)</td>
<td></td>
</tr>
<tr>
<td>RNLI Cup</td>
<td></td>
</tr>
<tr>
<td>Lancaster Cup</td>
<td></td>
</tr>
<tr>
<td>Old Codgers Cup</td>
<td></td>
</tr>
<tr>
<td>Coronation Cup (Endeavour)</td>
<td>Steve Perkins (Blackwater Sailing Club)</td>
</tr>
<tr>
<td>Personal Handicap</td>
<td></td>
</tr>
<tr>
<td>Maldon Town Regatta (Endeavour)</td>
<td></td>
</tr>
<tr>
<td>Autumn Series</td>
<td></td>
</tr>
<tr>
<td>Marlin Spike Series</td>
<td></td>
</tr>
<tr>
<td>Laying Up (Transom Trophy)</td>
<td></td>
</tr>
<tr>
<td>Sunset Trophy</td>
<td></td>
</tr>
<tr>
<td>Endeavour Trophy</td>
<td></td>
</tr>
<tr>
<td>Crew Trophy</td>
<td></td>
</tr>
<tr>
<td>MYC Trophy</td>
<td></td>
</tr>
<tr>
<td>Crash & Burn</td>
<td></td>
</tr>
<tr>
<td>Besy Improved Helm</td>
<td></td>
</tr>
<tr>
<td>David Lawton Shield (Kayaking Northey)</td>
<td></td>
</tr>
<tr>
<td>Escort Boat (Most Times Out)</td>
<td></td>
</tr>
<tr>
<td>Presidents Trophy</td>
<td></td>
</tr>
<tr>
<td>MYC Anniversary Trophy</td>
<td></td>
</tr>
<tr>
</table>
You’ll also want to paste the following code in the “Styles” area of either Component:
<style>
body {
font-family: 'Roboto', sans-serif;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px auto;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
If you’re asking chatGPT for code, ideally you should be asking for Tailwind code, that way you won’t need the extra styles css.
In future you can also post your code here on the forum and ask for a bit of a “sanity check” before using it
Godber
(David Morris)
7 October 2024 14:59
5
thanks…trying to learn hahah
dan
(Dan C.)
7 October 2024 15:00
6
It’s totally fine, you’re doing really well! Code is tricky, but we’re always here to help
Godber
(David Morris)
7 October 2024 15:03
7
just couldn’t understand how if you just swap them over same thing happens ie top one ok second one wider? dont wanna bother you too much cos I know your busy
dan
(Dan C.)
7 October 2024 15:07
8
Because there was a tonne of errors in the HTML, the browser was doing its best to clean it up, but couldn’t quite resolve it correctly.
You have to be very careful when writing code, a single character out of place can cause a cascade of errors.
1 Like
Godber
(David Morris)
7 October 2024 15:09
9
are there any books you recommend for this code stuff?