question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Table block doesn't save alignment data

See original GitHub issue

Here’s an example of what table JSON data looks like (from a StreamField form submission):

body-10-value:{"data":[["hello","world","sup"],["hii","yoooo",null],[null,null,null]],"first_row_is_table_header":false,"first_col_is_header":false}

However, you can right-click any cell, and choose Alignment > Left / Right / Center, among some vertical options, too. This data also needs to be saved into the JSON so it can be templated.

It’s probably too late for every cell to have its own “options” attribute, so I’m guessing alignment will need to be passed in as a map, like

"alignments": [{"cell": "0,1", "alignment": "left"}, {"cell": "2,2", "alignment": "center"}]

etc

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
AtomicSparkcommented, Jun 10, 2016

Although it is implemented in the handsontable code and currently non-functioning in Wagtail, HTML align attributes are depreciated in HTML5 and should not be used. I vote that we disable align features in handsontable if possible, before this turns into a Wagtail image debate on whether or not we inject surprise CSS into templates.

0reactions
robslotboomcommented, Oct 19, 2018

I agree with this but why not replace the html alignement attributes by alignment classes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML css Table misaligned Columns - Stack Overflow
The misalignment seems to be caused by the scrollbar. You could add a positive right-padding to the table header or a negative right-margin...
Read more >
Fix data that is cut off in cells - Microsoft Support
Reposition the contents of the cell by changing alignment or rotating text ; Indent the cell contents. On the Horizontal pop-up menu, click...
Read more >
Edit and Save | Block Editor Handbook
In JavaScript, arrays and objects are passed by reference, so this practice ensures changes won't affect other code that might hold references to...
Read more >
Tables in HTML documents
Borders and rules; Horizontal and vertical alignment ... The HTML table model allows authors to arrange data -- text, preformatted text, images, links, ......
Read more >
Tables - CKEditor 5 Documentation
Block vs inline content in table cells ... They are perfect for listing, grouping, and otherwise organizing data sets or for providing information...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found