Grid is getting invisible styles set (vue-cli, npm) about cheetah-grid HOT 7 CLOSED

Thank you for this question.

This is correct behavior.
vue-cheetah-grid does not display elements of <div class=define>.

from cheetah-grid.

Thank you for this question.

This is correct behavior.
vue-cheetah-grid does not display elements of <div class=define>.

Oh ok I see, but how do I implement it to display? I'm sorry but I'm confused why it doesn't show initially. I'm importing it globally, then creating my own component with the grid.

Thank you !

from cheetah-grid.

I may have misunderstood your question.

In your implementation, is the container element of the grid displayed when the grid is initialized?
There may be a problem if the container element is not displayed when initializing the grid.

In this case, after the container element is displayed, you need to call the following methods of the grid instance.
updateSize(), updateScroll() and invalidate()

(You need to use [email protected].)

from cheetah-grid.

I'm using a single page vue application. Using "cheetah-grid": "^0.7.1" and "vue-cheetah-grid": "^0.7.1" The grid is in a component. I'm not running any methods at runtime (this is probably my problem). I guess I need to read up more on this. The only way I was able to get this to display was adding this scoped css to my component: https://www.codepile.net/pile/PdPEgMV7

from cheetah-grid.

Perhaps there is this problem if you do not set the height and width of the container element.
I will try to reproduce it if I have the next work time.

I will close this issue.
If the problem persists please reopen this issue or open a new issue.

from cheetah-grid.

Sorry to keep commenting on this, but I did just as you said and didn't even use a vue component, same exact issue. I even ran grid.updateSize(), grid.updateScroll() and grid.invalidate(). If add that css back like I showed you in my previous link, it displays the grid and data. Otherwise I see nothing... https://www.codepile.net/pile/xOgrzDZg

from cheetah-grid.

@drpcken Thank you for additional information.

I checked the workings of the grid.
I noticed that the grid is not displayed if you do not set the height for the parent element of <div class="cheetah-grid">.

So, as you say, css defining is required.

In order to avoid confusion, I added html with style to the document sample.
https://future-architect.github.io/cheetah-grid/0.7/demos/gettingstarted/download_vue.html#vue-instance-template
https://future-architect.github.io/cheetah-grid/0.7/demos/gettingstarted/download.html#javascript-html

Thank you for your help.

from cheetah-grid.