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.

Positioning of SelectInput in a Tabulator custom component formatter

See original GitHub issue

I am having troubles with the position of a SelectInput component in a tabulator column, I have set all padding and margins to 0.px but the SelectInput seems to translate down about 3.px, any idea why this is? I don’t see this on any other form element using within a custom tabulator formatter. image

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
rjaroscommented, Jul 30, 2019

I have tried this and the SelectInput indeed seems to work fine as a formatter. As for the extra padding, this is something most promising in my tests:

                        formatterComponentFunction = { cell, _, _ ->
                            cell.getElement().style.paddingTop = "1px"
                            SelectInput(listOf("first" to "First", "second" to "Second"))
                        }

I’ve changed row height with rowFormatter:

                rowFormatter = {
                    it.getElement().style.height = "37px"
                }
0reactions
robert-cronincommented, Aug 9, 2019

yeah that is working for me too, thanks for that 👍 The only thing I found was that the SelectInput dropdown remains inside the table view and if its the last row, it gets hidden and you have to scroll down. I don’t think this happens with the SimpleSelectInput, but I think the original problem is solved 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Examples - Tabulator
You can create icon/button columns, by not specifying a field parameter in the column data and creating a custom formatter for the column...
Read more >
Formatting | Tabulator
Use formatters to customize the view of your table data. ... The image formatter creates an img element with the src set as...
Read more >
Editing Data | Tabulator
Use built in cell editors to allow users to edit table data, or build out your own for fully customizable table input.
Read more >
Filtering Data - Tabulator
Use custom or built in filter fuctions to allow users to view a subset of table data.
Read more >
CSS Styling - Tabulator
Add custom styling to your tables using a full set of CSS classes. ... Rows; Pagination; Data Trees; Printing; Menus & Popups; Formatters;...
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