initDIV() and bootstrap css

[spmacdonald]

First of all let me say thank you very much for your work on this project, I have learned a lot from it.

Not sure if this is a bug or user error. I have created my own Chiasm component called DataTable. This component uses d3 to build an HTML <table>. In the components constructor I do

var div = d3.select(my.initDIV());

and then hang all the table stuff off this div.

I am following your Chiasm bootstrap example where you use the layout plugin to select the DOM elements. I want use the bootstrap grid system. The problem seems to be initDIV() sets the style of the div to be style="position: absolute; left: 0px; top: 0px;" which doesn't play nice with the bootstrap container.

I think I could fix this by selecting the containerSelector value that I give the layout plugin in the component, but I am not sure how to do that.

Thanks again!
Scott

[curran]

Hi Scott,

This is great feedback, thank you. I can understand the issue you are facing. I believe the style is coming from chiasm-layout, line 89.

The larger issue here is that there really should be two separate components, one that does nested box layout (this is chiasm-layout), and another one that simply injects components into existing divs (I think this is what you are looking for). I've been meaning to create this for a while. This issue might be a good catalyst, and it shouldn't be that difficult. I know @Arne-Pfeilsticker is also interested in this.

[spmacdonald]

Thanks for the quick reply. I think you understand the situation perfectly, injecting the component into an existing div is what I need. I would be willing to take a crack at implementing this if you are interested. I see you have created a chiasm-injector project already, we can continue the discussion there if you like.

Cheers.

[curran]

Great, thank you for volunteering to work on this. I would welcome your work on this. Let's continue the discussion over at chiasm-project/chiasm-injector#2

[curran]

Also, is the code for your DataTable module Open Source? That would make a great addition to the Chiasm collection of modules. Here's what I have as a starting point for an HTML table Chiasm component, perhaps your implementation is similar.

[spmacdonald]

I could open source it yes. My implementation looks fairly similar to yours on the surface. I have added a few features I needed such as being able to supply formatter callbacks for each column. Would welcome your input.

[curran]

Closing, issues moved to:

• Complete chiasm-injector Complete implementation and tests chiasm-injector#2
• Fix Broken CSS positioning Fix Broken CSS positioning in Firefox chiasm-layout#4