Template talk:ItemList CF

From Nookipedia, the Animal Crossing wiki
Revision as of 17:35, July 13, 2021 by PanchamBro (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Not quite centered[edit]

I'm not sure if anyone has noticed, but after placing text in the table the headings are no longer center aligned. I believe this has something to do with the class="sortable" applied to allow the table to be sorted. The following is an example of the template as it currently operates, followed by a table with the 'class="sortable"' removed. Note that both of these templates appear correct in the preview tab but not live on the site (or when clicking the 'show preview' button). Also it's worth noting that the class="sortable" also seems to be modifying the font, I think it's a bit larger than the table with the class removed. That and neither table heading is actually vertically aligned within the cell (the text sits a bit towards the top), not sure how to fix this. --sunmarsh (talk) 16:19, July 15, 2014 (EDT)


Item Name Buy Price Sell Price Available From Color(s) Genres Size (sq) Info
test test test test test test test test


Item Name Buy Price Sell Price Available From Color(s) Genres Size (sq) Info
test test test test test test test test

After every |, add align="center"

{| align="center" width="80%" cellpadding="1px" style="border: 3px solid #FFDD66" 
! style="border: 0px solid; background:#FFDD66; color:#000;" | Item Name
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Buy Price
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Sell Price
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Available From
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Color(s)
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Genres
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Size (sq)
! style="border: 2px solid #FFDD66; background:#FFFFCC; color:#666;" | Info
|-
|align="center"|test
|align="center"|test
|align="center"|test
|align="center"|test
|align="center"|test
|align="center"|test
|align="center"|test
|align="center"|test
|}

So it looks like this.

Item Name Buy Price Sell Price Available From Color(s) Genres Size (sq) Info
test test test test test test test test

But I think the main problem is that the text is sort of a different size, but perhaps it's how you input the "test" text that makes it expand a bit? If you add a really long bit of text, what would happen?

Item Name Buy Price Sell Price Available From Color(s) Genres Size (sq) Info
toiewjoijfiomfioejgiomrioqergmoqenmb test test test test test test test

Hm, I don't understand why it would be off center, but with my temporary solution by adding align="center", the problem should be negligible. Mario Signature.png 16:25, July 15, 2014 (EDT)


Mario the code that you copied is an altered version of the template in question here. It doesn't include the line class="sortable". I included this altered code to make my point, which is: without this line the table centers everything fine, as you noted... but then you can't sort the table by clicking a heading. --sunmarsh (talk) 16:31, July 15, 2014 (EDT)

The off-centering is caused by padding added to the cells to ensure there's room for the icons that indicate that the table can be sorted, which weren't being displayed because of the way that the background was colored. I unhid them here for now as an example--I'm not sure if hiding them was intentional or not--and they'll be shown where the template is in use. If the icons aren't wanted, we can re-hide them and remove the padding; we could also show them on the rest of the sortable tables if people find them useful. -Sky (talk) 21:30, July 15, 2014 (EDT)
Thank you so much for providing clarity! I was starting to think I was crazy lol... I personally find them helpful to designate which heading the table is being sorted by, that and so that it doesn't look like the headings are awkwardly centered. Also is there a sort icon for the dark yellow Item Name cell? --sunmarsh (talk) 21:43, July 15, 2014 (EDT)
Oh, gotcha. Thanks, Sky. Mario Signature.png 21:48, July 15, 2014 (EDT)
Glad I could help, and I agree that they're helpful. There is an icon for the name column; thanks for catching that. -Sky (talk) 21:50, July 15, 2014 (EDT)